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"> <!-- začátek menu --> <ul> <li><a href="index.html">Domů</a></li> <li><a href="csgo.html">Na zahradu</a> <ul> <li><a href="#">Necoo</a></li> <li><a href="#">Necodfasdfasdfo3</a></li> <li><a href="#">Necoo2</a></li> </ul> </li> <li><a href="#">Do prahy</a></li> </ul> </div> <!-- konec menu -->
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#menu ul { width: 100%; list-style-type: none; /* vymazání odrážek */ margin: 0; /* vymazání vnějších okrajů */ padding: 0; /* vymazání vnitřních okrajů */ float: left; } #menu ul li { float: left; /* plovoucí umístění, zarovnání doleva */ position: relative; margin: 10px 5px 0px 0px; /* nastavení vnějších okrajů */ font-family: "Segoe UI"; /* nastavení písma */ } #menu a { display: block; text-decoration: none; /* zbavení podtržítka */ color: black; /* nastavení barvy */ padding-top: 3px; /* nastavení okraů vnitřních */ padding-bottom: 5px; padding-left: 10px; padding-right: 25px; border-bottom: 3px solid #D8D9DC; /* nastavení rámečku - je tam jen dole, po stranách ne */ background: #F0F1F4; } #menu ul li ul li { float: left; width: 100px; margin: 0; } #menu ul ul { position: absolute; left: 0; top: 31px; visibility: hidden; } #menu ul li:hover ul { visibility: visible; } #menu a:hover { border-color: red; } #menu ul li ul li a { display: block; text-decoration: none; color: black; padding: 3px; border: none;; background: #D8D9DC; margin: 0; width: 167px; } #menu ul li ul li a:hover { background: #CBE5FF; } #menu ul li ul li { border: 1px solid black; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>