Vertikální menu s podnabídkami

1. října 2005

•

Menu s podnabídkami, bez rozbalování.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Russ Weakley. Bližší popis najdete v článku Tutorial 3 – Nested lists.

CSS

#obalovydiv ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#obalovydiv a
{
display: block;
color: #FFF;
background-color: #036;
width: 9em;
padding: 3px 12px 3px 8px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: bold;
}
#obalovydiv a:hover
{
background-color: #369;
color: #FFF;
}
#obalovydiv li li a
{
display: block;
color: #FFF;
background-color: #69C;
width: 9em;
padding: 3px 3px 3px 17px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: normal;
}

XHTML

<html>
<body>
<div id=“obalovydiv“>
<ul>
<li><a href=“#“>Hlavní odkaz 1</a>
<ul>
<li><a href=“#“>Pododkaz 11</a></li>
<li><a href=“#“>Pododkaz 12</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>
</ul>
</li>
<li><a href=“#“>Hlavní odkaz 3</a>
<ul>
<li><a href=“#“>Pododkaz 31</a></li>
<li><a href=“#“>Pododkaz 32</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>