| | |
| Stránka: 1 z 1
| [ Príspevok: 1 ] | |
Autor | Správa |
---|
Registrovaný: 05.09.09 Príspevky: 1141 Témy: 127 Bydlisko: Lehota pod ... | Napísal camo: 22.09.2011 16:01 | |
|
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...
Otázka je: Ako to tam drží??? Vedel by mi to niekto logicky zdôvodniť?
Tu je celý kód:
Kód: <!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>
Ďakujem! // pridané po 1 hodine 3 minútach od posledného príspevkuEDIT:
Aha, takže je to top:auto...
|
|
| Stránka: 1 z 1
| [ Príspevok: 1 ] | |
Podobné témy | Témy | Odpovede | Zobrazenia | Posledný príspevok |
---|
| Menu hover v HTML, XHTML, XML, CSS | 29 | 668 | 28.03.2013 22:06 pecado | | hover menu v HTML, XHTML, XML, CSS | 0 | 427 | 19.05.2010 20:38 camo | | Horizontalne Hover menu v HTML, XHTML, XML, CSS | 2 | 620 | 18.10.2008 18:20 arno | | Hover na menu v HTML, XHTML, XML, CSS | 24 | 996 | 29.04.2008 18:11 Blackshadow | | hover v HTML, XHTML, XML, CSS | 9 | 743 | 08.08.2008 15:13 exoomer | | hover efekt v HTML, XHTML, XML, CSS | 1 | 674 | 08.08.2011 9:54 goodfridays | | Obrázkové hover v HTML, XHTML, XML, CSS | 8 | 503 | 12.03.2010 14:26 Denco1 | | navigacne menu - sek.menu v HTML, XHTML, XML, CSS | 2 | 495 | 15.10.2013 21:54 newbie99 | | mozno komplikovany hover v JavaScript, VBScript, Ajax | 4 | 621 | 21.10.2008 0:06 walther | | nastylizovanie a:hover v HTML, XHTML, XML, CSS | 2 | 662 | 21.02.2007 14:11 mylan | | zakazanie dedeneho hover v HTML, XHTML, XML, CSS | 3 | 629 | 07.02.2011 22:32 coldak | | CSS3 Anmácia - hover v HTML, XHTML, XML, CSS | 4 | 490 | 09.01.2011 13:07 Ando | | css a:hover v HTML, XHTML, XML, CSS | 5 | 1488 | 09.10.2008 23:52 suchy | | neukaze mi hover [ Choď na stránku: 1, 2 ] v HTML, XHTML, XML, CSS | 38 | 1727 | 29.04.2008 17:12 don jebot | | mouse hover galeria v HTML, XHTML, XML, CSS | 17 | 458 | 28.04.2014 16:48 Lessik | | li:hover neakceptuje rozmery v HTML, XHTML, XML, CSS | 6 | 394 | 01.11.2011 21:37 1daemon1 |
| Nemôžete zakladať nové témy v tomto fóre Nemôžete odpovedať na témy v tomto fóre Nemôžete upravovať svoje príspevky v tomto fóre Nemôžete mazať svoje príspevky v tomto fóre
|
|