Autor | Zpráva | ||
---|---|---|---|
dodox Profil |
#1 · Zasláno: 3. 3. 2006, 11:08:08 · Upravil/a: dodox
Dobrý den, mám takový menší problém. Narazil jsem na publikaci Erica Meyera kde je uevdeno docela pěkné menu. Myslím, že je i pěkně pochopitelné, ale nevím si rady s jednou věcí. Potřeboval bych, aby si menu nastavovalo automaticky šířku podle velikosti položek v menu. U menu první kategorie s tím až takový problém není. Tam je vše v pohodě. Ale problém nastává u menu 2. kategorie, kde v IE se položky této kategorie seřadí za sebe a ne pod sebe. Zkoušel jsem to řešit nastavením blokového prvku li na float a dát mu obtékání z obou stran, ale tohle řešení není dobré. Špatně funguje při použití hover (funguje dobře, ale není to esteticky pěkné - změna pozadí nenastane na celéím řádku kde je tato položka přítomna)
Mohl by mi někdo poradit ? Pokud někdo neví jak přesně jsem to myslel, tak zde je stránka s menu, které bych potřeboval upravit http://dodox.php5.cz a zde je příklad jak by to mělo vypadat ... např. http://fph.vse.cz/ výpis z css /*Menu*/ div#nav { width: 709px; float: left; background-color: #1270c8; margin: 0px 0px 0px 18px; _margin: 0px 0px 0px 9px; } div#nav ul { margin: 0; padding: 0; background: white; /*border: 1px solid #CCC; border-width: 0 1px;*/ } div#nav li { position: relative; list-style: none; margin: 0; float: left; width: 7em; line-height: 1em; } div#nav li:hover { background: #EBB; } div#nav li.submenu { /*background: url(dropmenu.gif) 95% 50% no-repeat;*/ } div#nav li.submenu:hover { background-color: #EDD; } div#nav li a { display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 6.5em; color: black; margin: 0px 2px; } div#nav>ul a { width: auto; } div#nav ul ul { position: absolute; width: 7em; display: none; margin: 0.1px; } div#nav ul ul li { /*border-bottom: 1px solid #CCC;*/ } div#nav li.submenu li.submenu { /*background: url(submenu.gif) 95% 50% no-repeat;*/ } div#nav li.submenu li.submenu:hover { background-color: #EDD; } div#nav li.submenu li.submenu:hover { background-color: #EDD; } div#nav ul.level1 li.submenu:hover ul.level2, div#nav ul.level2 li.submenu:hover ul.level3 { display:block; } div#nav ul.level2 { top: 1.5em; left: -1px; } div#nav ul.level3 { top: -1px; left: 7em; /*border-top: 1px solid #CCC;*/ } výpis z html <div id="nav"> <ul class="level1"> <li><a href="/">Home</a></li> <li class="submenu"><a href="/services/">Services</a> <ul class="level2"> <li><a href="/services/strategy/">Strategy</a></li> <li><a href="/services/optimize/">Optimization</a></li> <li><a href="/services/guidance/">Guidance</a></li> <li><a href="/services/training/">Training</a></li> </ul> </li> <li><a href="/events/">Events</a></li> <li class="submenu"><a href="/pubs/">Publications</a> <ul class="level2"> <li><a href="/pubs/articles/">Articles</a></li> <li class="submenu"><a href="/pubs/tuts/">Tutorials</a> <ul class="level3"> <li><a href="/pubs/tuts/html/">HTML</a></li> <li><a href="/pubs/tuts/css/">CSS</a></li> <li><a href="/pubs/tuts/svg/">SVG</a></li> <li><a href="/pubs/tuts/xml/">XML</a></li> </ul> </li> <li><a href="/pubs/wpapers/">White Papers</a></li> <li><a href="/pubs/comment/">Commentary</a></li> </ul> </li> <li><a href="/contact/">Contact</a></li> </ul> </div> |
||
Časová prodleva: 19 let
|
Toto téma je uzamčeno. Odpověď nelze zaslat.
0