HTML-CSS Stylish Page Navigation Bar For Blog And Website

We are comeback with another simple Navigation 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.

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 1s linear;
-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; -webkit-transition: all 1s linear;
background:#220077; -webkit-transition: all 1s linear;
}

That's it.