Vertikální menu s podnabídkami
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>
Mohlo by vás také zajímat
-
Jak se chránit před podvody na internetu – část 1
8. října 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024 -
Jak rozšířit úložiště Macu za pětinovou cenu?
16. prosince 2024 -
Užitečné nástroje pro bezpečnost na internetu
17. října 2024
Nejnovější
-
Co je to neuronová síť
21. července 2025 -
Elektronický podpis – má dnes ještě uplatnění?
16. července 2025 -
Co je to Generative Engine Optimization (GEO)
11. července 2025 -
Počítač v kapse: Android 16 připravuje průlomový Desktop Mode
8. července 2025