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
<html> <body> <nav> <ul> <li><a href='index.php'>Úvod</a> <li> <ul> <li class="vysuvacie"><a>Sbor</a> <ul> <li><a href='historie.php'>Založení sboru</a> <li><a href='historie1.php'>Historie</a> </ul> </ul> <li><a href='kontakt.php'>Kontakt</a> </ul> </nav> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
ul { list-style: none; margin: 0; padding: 0; } li { line-height: 2.5em; width: 260px; } nav > ul > li > ul { position: relative; } li.vysuvacie:before { content: ""; display: block; height: 2.5em; } li.vysuvacie ul { display: none; position: relative; top: -1.5em; } li.vysuvacie:hover ul { display: block; } li.vysuvacie > a { position: absolute; bottom: 0; left: 0; right: 0; } a { padding: 0 1em; text-decoration: none; display: block; background-color: #222; color: #FFF; } li + li { border-top: 1px solid #000; } li.vysuvacie ul { top: -2.5em; } li.vysuvacie:hover > a { background-color: orange; } li.vysuvacie a:hover, a:hover { background-color: #22483d; } li.vysuvacie li { border-top: 0 none; border-bottom: 1px solid #000; } li.vysuvacie > a { background-color: #111; } li.vysuvacie li a { background-color: #333; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>