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
<ul id="menu-bar"><li><a href="#">O NÁS</a></li> <li><a href="#">NOVINKY</a> </li> <li><a href="#">PODPORUJEME</a> <ul> <li ><a href="#">Občanská sdružení1</a></li> <li><a href="#">Občanské spolky</a> <ul> <li><a href="#">Spolek 1</a></li> <li><a href="#">Spolek 2</a></li> </ul> </li> </ul> </li> <li><a href="#">KONTAKTY</a></li> </ul>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body {background: black;} #menu-bar { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; height: 45px; line-height: 100%; background: #0D6AB7; position:relative; z-index:999; } #menu-bar li { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; float: left; position: relative; list-style: none; } #menu-bar a { font-family: arial; font-style: normal; font-size: 14px; color: #050A0D; text-decoration: none; display: block; padding: 17px 16px 14px 16px; margin: 0; margin-bottom: 0px; } #menu-bar li ul li a { margin: 0; } #menu-bar .active a, #menu-bar li:hover > a { background: #FFF; color: #050A0D; } #menu-bar ul li:hover a, #menu-bar li:hover li a { background: none; border: none; color: #666; } #menu-bar ul a:hover { background: #FFF !important; color: #ED7E20 !important; } #menu-bar li:hover > ul { display: block; } #menu-bar ul { background: #FFF; display: none; margin: 0; padding: 0; width: 300px; position: absolute; top: 45px; left: 0; } #menu-bar ul li { float: none; margin: 0; padding: 0; } #menu-bar ul a { padding: 10px 0px 10px 15px; color: #050A0D !important; font-size:14px; font-style:normal; font-family:arial; font-weight: normal; } #menu-bar ul li:first-child > a { border-top-left-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-right-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-topright: 0px; } #menu-bar ul li:last-child > a { border-bottom-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-bottomleft: 0px; border-bottom-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-bottomright: 0px; } #menu-bar:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #menu-bar { display: inline-block; } html[xmlns] #menu-bar { display: block; } * html #menu-bar { height: 1%; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>