Dnes som sa náhodou dostal k jednému riešeniu horizontálneho hover menu a neviem pochopiť jednu vec.
Každé ul submenu má position:absolute(to chápem) a to čo nechápem, je, ako je zadefinovaná pozícia od vrchu obalovacieho li.
Podĺa toho čo viem o position:absolute, tak by to malo byť v ľavom hornom rohu toho obalovacieho li, ale tu sa to pekne zaradí na základňu položky.
Aj keď zadám explicitne top:0px tak sa to zaradí až za odkaz a nie do toho rohu...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
* {margin: 0; padding: 0;}
body {margin-left: 7px; font: small/1.7 Verdana, Arial, lucida, helvetica, sans-serif; background: #fff; color: #333;}
h1 {width: 700px; font-size: 1.5em; font-weight: normal; line-height: 2em; margin-bottom: 0.5em; text-align: center;}
p {width: 700px; margin-bottom: 0.5em; text-align: center;}
.clear {clear: both;}
/* Hlavne menu */
#menu {display: table; width: 696px; background: #ddd url(menu.gif) left bottom repeat-x;border-top: 1px solid #999; border-right: 1px solid #999;}
#menu ul {list-style-type: none;}
#menu li {float: left; width: 139px; line-height: 2em; position: relative;}
#menu li a {display: block; font-weight: bold; text-align: center; background: transparent; color: #333; border-left: 1px solid #999; border-bottom: 1px solid #999; text-decoration: none;}
#menu li a.select {color: #000; background: #f8f8f8;}
#menu li ul {position: absolute; display: none; width: 140px;}
#menu li ul.wider {width: 170px}
#menu li li {width: 100%;}
#menu li li a {padding: 2px 3px 2px 7px; line-height: 1.4em; font-weight: normal; text-align: left; border-right: 1px solid #999; border-bottom: 1px solid #999;}
/* Hover efekty */
#menu li:hover a, #menu li.hover a {color: #000; background: #f8f8f8;}
#menu li:hover ul, #menu li.hover ul {display: block;}
#menu li:hover li a, #menu li.hover li a {background: #ddd;}
#menu li:hover li a:hover, #menu li.hover li a:hover {color: #000; background-color: #f8f8f8;}
/* Hacky pre IE 5.x a IE 6 */
* html body {font-size: x-small;}
* html .clear {line-height: 0;}
* html #menu li a {width: 100%;}
* html #menu {width: 701px;}
* html #menu li {behavior: url(hover.htc)}
</style>
<script type="text/javascript">
</script>
</head>
<body> <h1>Hover menu 2</h1>
<div id="menu">
<ul>
<li><a href="#">Úvod</a></li>
<li><a href="#" class="select">Výučba</a>
<ul>
<li><a href="#">Osnova predmentu</a></li>
<li><a href="#">Základné pojmy</a></li>
<li><a href="#">Teoretické otázky</a></li>
<li><a href="#">Odporúčané príklady</a></li>
<li><a href="#">Termíny skúšok</a></li>
</ul>
</li>
<li><a href="#">Výskum</a>
<ul>
<li><a href="#">O výskume</a></li>
<li><a href="#">Publikácie</a></li>
<li><a href="#">Projekty</a></li>
</ul>
</li>
<li><a href="#">Rôzne</a>
<ul>
<li><a href="#">Odkazy</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">O výskume</a></li>
<li><a href="#">Publikácie</a></li>
<li><a href="#">Projekty</a></li>
</ul>
</li>
<li><a href="#">Autor</a>
</ul>
<div class="clear"></div>
</div>
<p> </p>
<p>IE 5, IE 6, IE 7, Firefox 1.5, Firefox 2, Opera 8, Opera 9 </p> <p>Bez JavaScriptu okrem IE 5.x a IE 6</p>
</body>
</html>
Aha, takže je to top:auto...
Choď na stránku: