Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<ul> <li><a href="#">1. položka</a> <ul> <li><a href="#">1.1 položka</a></li> <li><a href="#">1.2 položka</a></li> <li><a href="#">1.3 položka</a></li> </ul> </li> <li><a href="#">2. položka</a> <ul> <li><a href="#">2.1 položka</a></li> <li><a href="#">2.2 položka</a></li> <li><a href="#">2.3 položka</a></li> </ul> </li> <li><a href="#">3. položka</a> <ul> <li><a href="#">3.1 položka</a></li> <li><a href="#">3.2 položka</a></li> <li><a href="#">3.3 položka</a></li> </ul> </li> <li><a href="#">4. položka</a> <ul> <li><a href="#">4.1 položka</a></li> <li><a href="#">4.2 položka</a></li> <li><a href="#">4.3 položka</a></li> </ul> </li> </ul>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
ul { margin: 0; padding: 0; list-style: none; background-color: #111; } ul li { display: inline-block; line-height: 32px; } ul li+li { border-left: 1px solid #FFF; } ul li a { padding: 10px; color: #FFF; text-decoration: none; } ul ul { display: none; position: absolute; } ul li:hover ul { display: block; } ul ul li { display: block; } ul ul li a { padding: 2px 10px; } ul ul li+li { border-left: 0 none; border-top: 1px solid #FFF; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>