Vertikální menu s podnabídkami
Obsah
Související
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 vybrat doménu: Co je dobré vědět?
2. září 2024
Nejnovější
-
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 -
Novinky ze světa domén: Co nás čeká v blízké budoucnosti?
3. července 2025 -
E-mail je tu s námi už 50 let, půjde do penze?
30. června 2025