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
<!-- for emmet --> <!-- ul>li{Položka $}(ul>li{Sub položka $$}*7)*5 --> <ul class="root"> <li>Položka 1 <ul> <li>Sub položka 01</li> <li>Sub položka 02</li> <li>Sub položka 03</li> <li>Sub položka 04</li> <li>Sub položka 05</li> <li>Sub položka 06</li> <li>Sub položka 07</li> </ul> </li> <li>Položka 2 <ul> <li>Sub položka 01</li> <li>Sub položka 02</li> <li>Sub položka 03</li> <li>Sub položka 04</li> <li>Sub položka 05</li> <li>Sub položka 06</li> <li>Sub položka 07</li> </ul> </li> <li>Položka 3 <ul> <li>Sub položka 01</li> <li>Sub položka 02</li> <li>Sub položka 03</li> <li>Sub položka 04</li> <li>Sub položka 05</li> <li>Sub položka 06</li> <li>Sub položka 07</li> </ul> </li> <li>Položka 4 <ul> <li>Sub položka 01</li> <li>Sub položka 02</li> <li>Sub položka 03</li> <li>Sub položka 04</li> <li>Sub položka 05</li> <li>Sub položka 06</li> <li>Sub položka 07</li> </ul> </li> <li>Položka 5 <ul> <li>Sub položka 01</li> <li>Sub položka 02</li> <li>Sub položka 03</li> <li>Sub položka 04</li> <li>Sub položka 05</li> <li>Sub položka 06</li> <li>Sub položka 07</li> </ul> </li> </ul>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
ul { padding: 0; text-align: center; } ul.root { width: 100%; height: 40px; } ul.root li { margin: auto .4px; transition-property: color; transition-duration: .7s; } ul.root, li { background: #000; color: #fff; font-family: sans-serif, arial; list-style-type: none; } ul.root > li { display: inline-block; vertical-align: middle; height: 0; /* -> prečo? */ min-height: 0; max-height: 100%; padding: } ul.root > li li { display: block; margin: inherit; padding: 0 2px } ul.root > li > ul { height: 0%; visibility: hidden; _transition: all .5s; } ul.root > li:hover > ul { height: 100%; visibility: visible; } ul.root li:hover { color: #0f0; cursor: pointer; cursor: hand; _transition: all .5s }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>