Clean Nav

Simple and pure css nav

by Joshua Powell

HTML

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Web</a></li>
        <li><a href="#">Print</a></li>
        <li><a href="#">Logos</a></li>
    </ul>
</nav>

CSS

html {
    background: #fff;
}

nav {
    margin: 0 auto;
    width: 500px;
}

nav ul {
    border-radius: 5px;
    border: 2px solid rgba(43, 43, 43, .3);
    height: 40px;
    width: 500px;
    overflow: auto;
    margin: 0;
    padding: 0;
}

nav ul li {
    background: -webkit-linear-gradient(top, #ff7200, #c65900);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff7200), to(#c65900)); 
    background: -webkit-linear-gradient(top, #ff7200, #c65900); 
    background: -moz-linear-gradient(top, #ff7200, #c65900); 
    background: -ms-linear-gradient(top, #ff7200, #c65900); 
    background: -o-linear-gradient(top, #ff7200, #c65900);
    height: 40px;
    width: 100px;
    text-align: center;
    line-height: 40px;
    display: block;
    float: left;
}

nav ul li a {
    color: #2b2b2b;
    display: block;
    text-decoration: none;
    text-shadow: 0 -1px 1px #743400;
}

nav ul li a:hover {
    color: #ff7200;
    background: #2b2b2b;
    height: 40px;
    width: 100px; 
}