Search This Blog

Mind freaker Stuff

Please Visit my new blog http://www.mindfreakerstuff.com for new articles related to web and mobile designing.
Showing posts with label HTML li Menu. Show all posts
Showing posts with label HTML li Menu. Show all posts

Monday, July 25, 2011

Vertical HTML list Menu - Simple Rollover







HTML
<div id="nav">
<ul id="navlist">
<li id="active"><a href="#" class="
current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#
nav{ width: 160px; }

#
nav ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#
nav a
{
display: block;
padding: 3px;
width: 150px;
background-color: #036;
border-bottom: 1px solid #eee;
}

#
nav a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#
nav a:hover
{
background-color: #FFF;
color: #999;
}


#nav a.current
{
background-color: #FFF;
color: #000;
}


Tested on IE6 and above , and all Major browsers ..