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
<html> <body> <div id="nav" class="box"> <div class="main"> <ul class="druhy_nabidek"> <li class="active"><a href="/" title="Všechno">Vše</a></li> <li><a href="/cesta/" title="Cesta">Cesta</a></li> <li><a href="/dovolena/" title="Dovolená">Dovolená</a> <ul> <li> <a href="#">Česká republika</a> </li> <li> <a href="#">Slovenská republika</a> </li> </ul> </li> <li><a href="/jidlo/" title="Jídlo">Jídlo</a></li> </ul> </div> <!-- /main --> </div> <!-- /nav --> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#nav { clear:both; background-color:#E01900; } #nav ul { margin:0; padding:0; list-style:none; } #nav li { display: block; margin: 0px; padding: 0px; } #nav li a { display: block; padding: 5px 6px 10px; text-align:center; text-decoration: underline; font-weight: bold; background: #E01900; border-left: 1px solid #FF704E; color: #FFF; } #nav li img { width:24px; height:24px; position:relative; top:6px; left:0; padding-right:5px; } #nav li.active a { font-weight:bold; text-decoration:none; background: #AE1300; color:#FFF; } #nav li a:hover { text-decoration:none; background:#AE1300; color:#FFF; } #nav li.last a { border-right:1px solid #FF704E; } #nav ul li {float:left;} #nav li ul {display: none; } #nav ul li:hover > ul {display:block;} #nav li:hover ul {display:none; position:absolute;} #nav li:hover li {float: none;}
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>