CSS horizontal menu

In: CSS

June 22nd, 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:

Written by

Dejan is pragmatic software developer with Master's Degree in Computer Science.

Make Magento Checkout Awesome

Powered by WordPress, icons by Iconfinder.
Copyright © 2010 - 2013 | StuntCoders