CSS horizontal menu with links that hovers up when the mouse moves over them. 100% CSS, 0% Script.

Demo: Click Here

Installation :

Step 1: Insert the following style sheet to the HEAD section of your page:

<style type=”text/css”>
body {
background-color: #999999;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.cssmenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}
.cssmenu ul li{
list-style: none;
display: inline;
}
.cssmenu ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #FF7700;
border: 2px solid #FF7700;
}
.cssmenu ul li a:hover{
background-color: #FF6600;
color:#FFFFFF;
border-style: outset;
}
html>body .cssmenu ul li a:active { /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
</style>

Step 2: Add the below HTML to the body of your page.

<div class=”cssmenu”>
<ul>
<li><a href=”http://www.dassnagar.com/blogge/”>Blogge</a></li>
<li><a href=”http://www.google.com”>Google</a></li>
<li><a href=”http://www.yahoo.com”>Yahoo</a></li>
<li><a href=”http://www.dassnagar.com”>Dassnagar</a></li>
<li><a href=”http://www.digg.com”>Digg</a></li>
</ul>
</div>

You can have multiple menus on the same page. Thanks and Enjoy.

Share This

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!