CSS horizontal menu

22.Jun.2011

This is a snippet of simple CSS horizontal menu. First of all – we’re going to create a HTML structure for our CSS horizontal menu. Here it is:

<ul id="nav">
    <li><a href="#">Magazine</a></li>
    <li class="active"><a href="#">Snippets</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Now – our CSS horizontal menu it looks like a regular list so let’s style it with some CSS:

#nav {
    min-height:48px;
    box-shadow:0 0 5px #0099cc;
    background: #eee;
    display:block;
    margin:15px 0;
    padding:0 10px;
}
#nav li {
    float: left;
    padding: 15px 20px;
    list-style: none;
    background: transparent;
}
#nav li:hover {
    background: #f8f8f8;
}
#nav li.active {
    background: #f8f8f8;
}
#nav a {
    font-size: 16px;
}

Finally – we got ourselves one nice CSS horizontal menu which we can implement easily to our website. Here is the demo: