Jul
31
2008
Horizontal hover menu PDF Print E-mail

HariesDesign.com This is code for Horizontal menu, with simple sub menu. look at the preview

horizontal hover menu

here the code...

 

 

 


HTML ( placed after <BODY> )

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://www.hariesdesign.com/new/#" id="current">Item one</a>
<ul id="subnavlist">
<li id="subactive"><a href="http://www.hariesdesign.com/new/#" id="subcurrent">Subitem one</a></li>
<li><a href="http://www.hariesdesign.com/new/#">Subitem two</a></li>
<li><a href="http://www.hariesdesign.com/new/#">Subitem three</a></li>
<li><a href="http://www.hariesdesign.com/new/#">Subitem four</a></li>
</ul>

</li>
<li><a href="http://www.hariesdesign.com/new/#">Item two</a></li>
<li><a href="http://www.hariesdesign.com/new/#">Item three</a></li>
<li><a href="http://www.hariesdesign.com/new/#">Item four</a></li>
</ul>
</div>

 

CSS ( placed before </HEAD> )

<style>
ul#navlist { font-family: sans-serif; }

ul#navlist a
{
font-weight: bold;
text-decoration: none;
}

ul#navlist, ul#navlist ul, ul#navlist li
{
margin: 0px;
padding: 0px;
list-style-type: none;
}

ul#navlist li { float: left; }

ul#navlist li a
{
color: #ffffff;
background-color: #003366;
padding: 3px;
border: 1px #ffffff outset;
}

ul#navlist li a:hover
{
color: #ffff00;
background-color: #003366;
}

ul#navlist li a:active
{
color: #cccccc;
background-color: #003366;
border: 1px #ffffff inset;
}
/* www.hariesdesign.com */
ul#subnavlist { display: none; }
ul#subnavlist li { float: none; }

ul#subnavlist li a
{
padding: 0px;
margin: 0px;
}

ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}

ul#navlist li:hover ul#subnavlist li a
{
display: block;
width: 10em;
border: none;
padding: 2px;
}

ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }
</style>

 
 
< Prev   Next >
[ Back ]

 

 

 

Gallery Photography

Must Read

Related Links

Tips and Trick
Pro Directory
Great List Directory

Login

Traffic



Msn bot last visit powered by MyPagerank.Net
Yahoo bot last visit powered by MyPagerank.Net
View blog reactions