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
<div id="nav-menu"> <ul id="nav"> <li><a href="#" class="current">Text 01</a></li> <li><a href="#">Text 02</a></li> <li><a href="#">Text 03</a> <ul> <li><a href="#">Sub Text 01</a></li> <li><a href="#">Sub Text 02</a></li> <li><a href="#">Sub Text 03</a></li> </ul> </li> <li><a href="#">Text 04</a></li> </ul> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#nav-menu { width: 1000px; margin: 0 auto; position: static; } #nav { float: left; padding: 0; margin: 0; } #nav li { display: inline; height: auto; float: left; } #nav a { float: left; display: block; text-decoration: none; padding: 20px 40px; text-align: center; color: #ffffff; background: #19c589; } #nav li a:hover, #nav li .current { background-color: #2f3036; } /* Submenu */ #nav ul { display: none; position: absolute; } #nav li:hover ul { display: block; } #nav ul li { display: block; } #nav ul li a { margin: 0 auto; padding: 16,6px 10px; } #nav 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>