<h1>Fluid-width Navigation, One Extra Item</h1>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="jobs.html">Jobs</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="privacy.html">Privacy</a></li>
</ul>
</nav>
<p class="p">Demo by Dan Rose. <a href="http://www.sitepoint.com/">See article</a>.</p>
body {
font-family: Arial, sans-serif;
padding: 4px;
}
h1 {
text-align: center;
font-weight: normal;
}
nav {
width: 100%;
background: #f0f0f0;
border: 1px solid #ccc;
border-right: none;
}
nav ul {
overflow: hidden;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
float: left;
text-align: center;
border-left: 1px solid #fff;
border-right: 1px solid #ccc;
width: 16.6667%; /* fallback for non-calc() browsers */
width: calc(100% / 6);
box-sizing: border-box;
}
nav ul li:first-child {
border-left: none;
}
nav ul li a {
display: block;
text-decoration: none;
color: #616161;
padding: 10px 0;
}
.p {
text-align: center;
font-size: 14px;
margin-top: 80px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.