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
-
-
Co je to DNSSEC, jak funguje a jak si ho nastavit?
14. srpna 2024 -
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024 -
Od iPhonu po Android: Ultra HDR přináší nový standard fotografií
1. listopadu 2024
Nejnovější
-
-
Srovnání Mini počítačů: Mac Mini M4 vs. Asome Max Studio
7. dubna 2025 -
1,5 milionu CZ domén: Co to znamená pro český internet?
31. března 2025 -
Co je to TTL a proč na něm záleží?
25. března 2025