Vertikální hover menu

1. října 2005

•

Klasické vertikální hover menu.

Pro správnou funkci v MSIE je třeba do kořenového adresáře stránky umístit soubor hover.htc. Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Janos Horvath. Bližší popis najdete v článku Hover emulation for IE5+.

CSS

body
{
background-color:#dddddd;
}
ul#hlavniMenu
{
width:100px;
background-color:white;
}
ul#hlavniMenu, ul
{
padding:0;
margin:0;
list-style-type:none;
}
ul#hlavniMenu ul
{
position:absolute;
top:0;
left:100px;
visibility:hidden;
background-color:white;
}
ul#hlavniMenu li
{
position:relative;
width:100px;
}
ul#hlavniMenu a
{
color:black;
display:block;
font:12px arial,sans-serif;
text-decoration:none;
display:block;
width:100%;
}
ul#hlavniMenu a:hover, ul#hlavniMenu li:hover a, ul#hlavniMenu li.hover a
{
background-color:black;
color:white;
}
ul#hlavniMenu li:hover ul a, ul#hlavniMenu li.hover ul a
{
background-color:white;
color:black;
}
ul#hlavniMenu li:hover ul a:hover, ul#hlavniMenu li.hover ul a:hover
{
background-color:black;
color:white;
}
ul#hlavniMenu li:hover ul, ul#hlavniMenu li.hover ul
{
visibility:visible;
}
ul#hlavniMenu li li
{
border:none;
padding:0;
background-color:white;
}
ul#hlavniMenu li
{
behavior: url(hover.htc);
}

XHTML

<html>
<body>
<ul id=“hlavniMenu“>
<li><a href=““>Hlavní odkaz 1</a>
<ul>
<li><a href=““>Pododkaz 11</a></li>
<li><a href=““>Pododkaz 12</a></li>
<li><a href=““>Pododkaz 13</a></li>
</ul>
</li>
<li><a href=““>Hlavní odkaz 2</a>
<ul>
<li><a href=““>Pododkaz 21</a></li>
<li><a href=““>Pododkaz 22</a></li>
<li><a href=““>Pododkaz 23</a></li>
</ul>
</li>
<li><a href=““>Hlavní odkaz 3</a>
<ul>
<li><a href=““>Pododkaz 31</a></li>
<li><a href=““>Pododkaz 32</a></li>
<li><a href=““>Pododkaz 33</a></li>
</ul>
</li>
</ul>
</body>
</html>