<nav class="nav">
  <ul>
    <li><a href="#1">HOME</a></li>
    <li><a href="#2">ABOUT</a></li>
    <li><a href="#3">CONTACT</a></li>
    <li><a href="#4">PORTFOLIO</a></li>
    <li><a href="#5">CATEGORY</a></li>
  </ul>
</nav>
	* {
		box-sizing: border-box;
	}
	
	body {
		color: #fff;
		font-family: メイリオ;
		margin: 0;
		padding: 0;
	}
	
	.nav {
		background: #F27398;
		box-shadow: 0 2px 5px #ccc;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		width: 100%;
		ul {
			display: -webkit-flex;
			display: flex;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
			list-style: none;
			margin: 0;
			padding: 0;
			li {
				-webkit-flex: 1 1 auto;
				flex: 1 1 auto;
				a {
					color: #fff;
					display: -webkit-flex;
					display: flex;
					-webkit-justify-content: center;
					justify-content: center;
					text-decoration: none;
					padding: 20px;
					position: relative;
					&:before {
						border-left: 1px solid #fff;
						content: '';
						height: 1em;
						position: absolute;
						left: 0;
						top: 50%;
						-webkit-transform: translateY(-50%);
						transform: translateY(-50%);
					}
				}
				&:last-child {
					a {
						&:after {
							border-left: 1px solid #fff;
							content: '';
							height: 1em;
							position: absolute;
							right: 0;
							top: 50%;
							-webkit-transform: translateY(-50%);
							transform: translateY(-50%);
						}
					}
				}
			}
		}
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.