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="menu-box"> <ul id="menu" class="clearfix"> <li class="first"><a class="active" href="/">Úvod</a> <ul> <li><a href="#">Testovací submenu 1</a></li> <li><a href="#">Testovací submenu 2</a></li> <li><a href="#">Testovací submenu 3</a></li> </ul> </li> <li><a href="#">Autoři</a></li> <li><a href="#">Články</a></li> <li><a href="#">Fotografie</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Fotografie</a></li> <li><a href="#">Kontakt</a></li> </ul> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#menu-box { background: #711c23; width: 1000px; margin-left:auto; margin-right:auto; margin-top:230px; } #menu {margin: 0 auto;} #menu li { float: left; display: inline-block; list-style-type: none; text-align: center; position: relative; } #menu li a { text-decoration: none; color: #FFF; float: left; display: inline; line-height: 35px; padding: 0 18px; border-right: 1px solid #000000; } #menu li.first a {border-left: 1px solid #711c23;} #menu li a:hover, #menu li a.active {background-color: #CC0033;} #menu li > ul { position: absolute; top: 100%; left: 0; display: none; background-color: black; } #menu li:hover > ul { display: block; } .menu ul {margin-top: 0px; position: absolute; visibility: hidden; background-color: #A72135; margin: 0; padding: 0; list-style-type: none; } .clearfix:after { display: block; clear: both; visibility: hidden; height: 0; font-size: 0; content: ' '; } .clearfix {min-height: 1px;} .clearfix {display: inline-block;} .clearfix {display: block;}
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>