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
<main class="main2"> <nav> <ul> <li><a href="index.html">Home</a> <li><a href="historie.html">Historie</a> <ul> <li><a href="#">historie</a> <li><a href="#">dlouhá historie</a> <li><a href="#">historie</a> </ul> <li><a href="vyborsdh.html">Výbor SDH</a> <li><a href="#">nic</a> <li><a href="#">nic</a> </ul> </nav> </main> Ukončovací značka </li> je nepovinná a v praxi ji nemá smysl psat, její uvedení může jen způsobit chybu omylem.
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { /*pozadí*/ font-family:"Arial", sans-serif; background-color: #2d2d2d ; } main { text-align: center; } nav { display: inline-block; } nav ul { /* zrušíme odrážky a odsazení seznamů a ukončíme plavání pomocí overflow */ list-style:none; background:#ffffff; border-radius:8px; padding: 0; margin: 0; overflow: hidden; } nav>ul>li { /* první úroveň musí plavat; ostatní nesmí */ float:left; } nav ul ul { /* skrýt podmenu a vyhodit jej ze stránky */ display:none; position:absolute; } nav ul li:hover ul{ /* při hoveru zobrazit to podmenu */ display:block; } nav a { /* odkazy jsou blokové a mají padding + barvičky */ text-decoration:none; color:#000000; padding:10px 40px; display: block; border-radius:8px; } nav a:hover{ /* barvičky při najetí */ background-color:#c0c0c0; color:#ff0000; } nav ul ul a:hover{ /* barvičky podmenu při najetí */ color: #099; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>