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 class="header"> <div class="header_layout"> <div class="logo"></div> <ul> <li><a href="#">Položka 1</a></li> <li><a href="#">Položka 2</a> <ul> <li><a href="#">Podpoložka 1</a></li> <li><a href="#">Podpoložka 2</a></li> </ul> </li> <li><a href="#">Položka 3</a></li> <li><a href="#">Položka 4</a></li> </ul> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { padding: 0; margin: 0; background-color: #e6e6e6; } div.header { width: 100%; height: 73px; background-color: #008bff; text-align: center; } div.header div.header_layout { width: 100%; max-width: 1140px; display: inline-block; } div.header div.header_layout div.logo { float: left; width: 67px; height: 65px; background-color: #fafafa; margin: 4px 0px 4px 0px; } div.header div.header_layout ul { float: right; } div.header div.header_layout ul ul { position: absolute; left: 0; padding: 0; background-color: red; display: none; } div.header div.header_layout ul li:hover ul { display: block; } div.header div.header_layout ul li { display: inline-block; padding: 0px 10px 0px 10px; line-height: 73px; position: relative; } div.header div.header_layout ul ul li { display: block; } div.header div.header_layout ul li a { text-decoration: none; color: #fff; } div.header div.header_layout ul ul li a { white-space: nowrap }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>