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"> <a n:href="#" class="logo"></a> <div class="user"> <ul> <li> <a href="#">Účet <i class="fas fa-caret-down"></i></a> <ul> <li><a href="#">Registrace</a></li> <li><a href="#">Přihlášení</a></li> </ul> </li> </ul> </div> <div class="menu"> <ul> <li><a href="#">Položka 1</a></li> <li> <a href="#">Položka 2 <i class="fas fa-caret-down"></i></a> <ul> <li><a href="#">Podpoložka 1</a></li> <li><a href="#">Podpoložka 2</a></li> <li><a href="#">Podpoložka 3</a></li> </ul> </li> </ul> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
* { padding: 0; margin: 0; box-sizing: border-box; } .header { width: 100%; height: 76px; background-color: #f5f5f5; text-align: center; position: relative; z-index: 999; } .logo { position: absolute; left: 0; width: 313px; height: 68px; background-image: url("https://i.ibb.co/bbGwzn3/logo.png"); margin: 4px 0; } .menu ul li { display: inline-block; padding: 0 10px; line-height: 76px; position: relative; } .menu ul li a { text-decoration: none; color: #000; } .menu ul li a:hover { color: #337ab7; } .menu ul li ul { position: absolute; top: 60px; background-color: #f5f5f5; border-top: 1px solid #000; border-bottom: 1px solid #000; display: none; } .menu ul li:hover ul { display: block; } .menu ul li ul li { display: block; padding: 5px 10px; line-height: normal; text-align: left; } .menu ul li ul li a { white-space: nowrap; } .user { position:absolute; right: 0; } .user ul { float: right; margin-right: 40px; } .user ul li { display: inline-block; padding: 0 10px; line-height: 76px; position: relative; } .user ul li a { text-decoration: none; color: #000; } .user ul li a:hover { color: #337ab7; } .user ul li ul { position: absolute; top: 60px; left: 0; background-color: #f5f5f5; border-top: 1px solid #000; border-bottom: 1px solid #000; display: none; } .user ul li:hover ul { display: block; } .user ul li ul li { display: block; padding: 5px 10px; line-height: normal; text-align: left; } .user ul li 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>