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>Česká republika</li></ul> <ul><li>Slovenská republika</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:inline; margin:0; padding:0;} #nav li a {display:block; float:left; padding:5px 6px 10px; 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 li ul{display: none;} #nav li:hover ul {display: block;} #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>