Proste Menu Z Rollover

Rollover otzrymywany poprzez konwersję listy w blok przy użyciu “display: block” i zmianie koloru tła poprzez “a:hover”.

HTML

<div id=”navicontainer”>
<ul id=”navilist”>
<li id=”active”><a href=”#” id=”current”>Link jeden</a>
<ul id=”subnavlist”>
<li id=”subactive”><a href=”#” id=”subcurrent”>Link w submenu </a></li>
<li><a href=”#”>Link w submenu</a></li>
<li><a href=”#”>Link w submenu</a></li>
</ul>
</li>
<li><a href=”#”>Link dwa </a></li>
<li><a href=”#”>Link trzy </a></li>
</ul>
</div>

CSS

#navicontainer { margin-left: 30px; }
#navicontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}
#navcontainer li { margin: 0 0 1px 0; }
#navicontainer a
{
display: block;
padding: 5px 10px;
width: 140px;
color: #fff;
background-color: #036;
text-decoration: none;
}
#navicontainer a:hover
{
color: #fff;
background-color: #69C;
text-decoration: none;
}
#navicontainer ul ul li { margin: 0 0 1px 0; }
#navicontainer ul ul a
{
display: block;
padding: 5px 5px 5px 30px;
width: 125px;
color: #fff;
background-color: #369;
text-decoration: none;
}
#navicontainer ul ul a:hover
{
color: #fff;
background-color: #69C;
text-decoration: none;
}