Navigation Menu With CSS Only

We are comeback with another simpleNavigation menu made up of CSS3 with additional effects using CSS3 Transition property. CSS Transitions make, powerful effect without the use of JavaScript for many common effects. This menu perfectly work only on some browser such as Chrome, Firefox, and Safari. Here we using simple CSS only.

Live Demo

HTML

Here is the basic HTML code for this navigation menu.

<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</div>

Now you will see like underneath of link without any style and background color. (see image below)

CSS

Now we are going to give color, border and other things to the underneath of link above. Following are CSS code. If you are blogspot users, then add following code before ]]></b:skin>  

#nav {
float: left;
font: bold 13px Arial, Helvetica, Sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 25px;
overflow: hidden;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav ul li {
float:left;
}
#nav ul li a {
float: left;
color:#000;
padding: 10px 15px;
text-decoration:none;
background:#ff9d36;
-webkit-transition: all .6s ease-in;
-moz-transition: all .6s ease-in;
-o-transition: all .6s ease-in;
transition: all .6s ease-in;
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
box-shadow: 1px px 1px rgba(0,0,0,0.4);
}
#nav ul li a:hover {
color: #fff;
background:#220077;
-webkit-transition: all .6s ease-in;
-moz-transition: all .6s ease-in;
-o-transition: all .6s ease-in;
transition: all .6s ease-in;
}

That's it. May you want to check example of this menu and If you have any questions about this menu, then just drop your comment below.