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
-
Aktualizujete svoji .NET webovou aplikaci? Může se hodit app_offline.htm
10. července 2024 -
Zvýšení výkonu WiFi signálu: Jak a proč používat WiFi zesilovače
28. června 2023 -
-
Co je to GPSR a jak ovlivní české e‑shopy?
28. ledna 2025
Nejnovější
-
-
-
LAMP VPS: Rychlé a efektivní nasazení webových aplikací
6. února 2025 -
OpenAI zpřístupnilo ChatGPT Search všem uživatelům
6. února 2025