Attractive CSS Horizontal Menu For Blogger/Websites

This is a another nice css horizontal menu for your blogspot blog or website.To add it to your site follow the steps below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

<style type='text/css'>
#nav {
width:100%;
margin-left:-40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNFuO4W-kBj5d44yOGb48pYF3Bm0SngI92YxGVTwF2QX7f_VK-7G3Pqx1Uz8Y87exPrr8wv01B4KNDcMJ7Rg9lMz40_8-HEo-SI6A5UOckqPOzTYOVf7BJNSGgwbPLClFiaMVNWKSxIlQG/) repeat-x;
}

#nav li {
float: left;
display: block;
}

#nav li a {
float: left;
display: block;
padding: 12px 18px 12px 18px;
text-transform: uppercase;
text-decoration:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi90RUgsoNIohfebzKClczG2XCvt8bFQKKKlqOBB0ldvIxq-7EvlodYK0Qrr08UIohtKn6qetFKrLT2I-R-lj7SSwtaHKMcHb_xRZRczds64G3d9V1bB3Axyz1G1mjtgLHkOaG-_QCaJQO4/) no-repeat top right;
color:#ffffff;
}

#nav li a:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi90RUgsoNIohfebzKClczG2XCvt8bFQKKKlqOBB0ldvIxq-7EvlodYK0Qrr08UIohtKn6qetFKrLT2I-R-lj7SSwtaHKMcHb_xRZRczds64G3d9V1bB3Axyz1G1mjtgLHkOaG-_QCaJQO4/) no-repeat right -40px;
color:#ffffff;
text-decoration:none;
}

ul#nav li.current_page_item a, ul#nav li.current-cat a {
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi90RUgsoNIohfebzKClczG2XCvt8bFQKKKlqOBB0ldvIxq-7EvlodYK0Qrr08UIohtKn6qetFKrLT2I-R-lj7SSwtaHKMcHb_xRZRczds64G3d9V1bB3Axyz1G1mjtgLHkOaG-_QCaJQO4/) no-repeat right -80px;
}

#nav li ul {
display: none;
}
</style>

Note : Host mainbg.jpg and navi-bg.jpg images yourself.






4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<ul id="nav">
    
<li class="current_page_item"><a href="#">Home</a></li>
            
<li><a href="#" title="#">HTML</a></li>

<li><a href="#" title="#">CSS</a></li>

<li><a href="#" title="#">PHP</a></li>

<li><a href="#" title="#">MySQL</a></li>

<li><a href="#" title="#">About</a></li>

<li><a href="#" title="#">Contact</a></li>

</ul>
    
<div class="clear"></div>

You are done.

Demo