[CSS] Tweede nivo Suckerfish IE6 en 7 lijnt niet goed uit

[rickbouman]

Beste tweakers,

Ik ben bezig met een menu voor een website. Nu lijnt in Internet Explorer 6 en 7 het tweede nivo van SuckerFish niet goed uit.
De bedoeling is dat het submenu dus gewoon direct onder de witte hover komt (zie afb. onder)

code:

/* Algemeen en toplevel */
#topmenu_items {float:left; width:100%; font-size:120%; margin: 6px 0 0 0;line-height: 35px;}
#topmenu_items ul.menu {list-style: none; margin: 0; padding: 0 0 6px 0; line-height: 35px; display: block; height: 35px;}
#topmenu_items ul.menu li {float: left; padding: 0; margin: 0 6px 0 0; height: 35px; display: block;}
#topmenu_items ul.menu li a {float: left; padding: 0 12px 0 12px; margin: 0 0 12px 0; display: block; color: #555555; font-weight: bold; height: 41px; line-height: 35px;}
#topmenu_items ul.menu li.active {background: url(../images/menu/topl_bg_r.png) top right no-repeat;}
#topmenu_items ul.menu li.active a {color: #000000; background: url(../images/menu/topl_bg_l.png) top left no-repeat;}
#topmenu_items ul.menu li:hover, #topmenu_items ul.menu li.sfhover {left: auto; background: url(../images/menu/topl_bg_r.png) top right no-repeat;}
#topmenu_items ul.menu li:hover a, #topmenu_items ul.menu li.sfhover a {color: #000000; background: url(../images/menu/topl_bg_l.png) top left no-repeat; text-decoration: none;}

/* Dropdown en second level */
#topmenu_items ul.menu li ul {left: -999em; position: absolute; top:47px;}
#topmenu_items ul.menu li:hover ul, #topmenu_items ul.menu li.sfhover ul {z-index: 1002; left: auto; float: left; display: block; line-height: 2em; margin: 0 0 0 -5px; padding: 0 0 16px 0; width:197px; background: url(../images/menu/sec_bg.png) center bottom no-repeat;}
#topmenu_items ul.menu li ul li {display:block !important; float: left; width:12em; height: 2em; left: auto; line-height: 2em; background: none !important; color: #181818; margin: 0 0 0 6px; padding: 0 0 5px 15px; width: 170px; border-bottom: #bcbcbc 1px solid;}
#topmenu_items ul.menu li ul li a {background: none !important; font-size: 90%; font-weight: normal; margin: 0; padding: 0;}
#topmenu_items ul.menu li ul li:hover, #topmenu_items ul.menu li ul li.sfhover  {background: #fff !important;}
#topmenu_items ul.menu li ul li:hover a, #topmenu_items ul.menu li ul li.sfhover a {font-weight: bold;}
#topmenu_items ul.menu li ul li.active {background: #fff !important;}
#topmenu_items ul.menu li ul li.active a {font-weight: bold;}

/* IE7 fix */
#topmenu_items li:hover, #topmenu_items li.sfhover {position: static;}

Het ziet er nu zo uit:
http://image-shed.com/out.php/i1678_rotzooi.png

Ik hoop dat jullie mij kunnen helpen, heb echt al vanallerlei fixes geprobeerd die ik bij Google kon vinden..
(onder andere sites als deze: http://de.siteof.de/extended-menu-faq-suckerfish-ie7.html)

Alvast heel erg bedankt,
Mvg,
Rick

[ Voor 3% gewijzigd door rickbouman op 10-01-2010 14:18 . Reden: Opgelost, maar kan titel niet aanpassen :) ]

[MueR]

Zet op regel 12 eens de position op relative, en op regel 13 de left op 0 ?

[rickbouman]

Trekt heel het eerste nivo compleet uit elkaar als ik dat doe.. Die fix stond ook op internet inderdaad..

Iemand nog een ideetje?

[ Voor 11% gewijzigd door rickbouman op 10-01-2010 00:03 ]

[Bozozo]

Probeer eens
#topmenu_items ul.menu li { position: relative; }
#topmenu_items ul.menu li:hover ul, #topmenu_items ul.menu li.sfhover ul { position: absolute; left: 0; }

[pasz]

Ik pik meestal een voorbeeld van : http://www.cssplay.co.uk/menus/

[rickbouman]

Bozozo schreef op zondag 10 januari 2010 @ 11:56:
Probeer eens
#topmenu_items ul.menu li { position: relative; }
#topmenu_items ul.menu li:hover ul, #topmenu_items ul.menu li.sfhover ul { position: absolute; left: 0; }

Ik kan het niet anders zeggen dan: Je bent geweldig
Heb even gewoon alles weggegooid, en met schone lei begonnen zoals ik het altijd geleerd had.. en toen ook dit foefje erbij gebruikt.. en het werkte weer! Dankjewel!

[Verwijderd]

Hier hetzelfde verhaal. Ik krijg het menu van onze site in IE7.0 maar niet goed. Er zit aardig wat CSS in de code om het ding te laten smoelen zoals we dat willen. In alle browsers werkt het naar behoren behalve in IE7.0. Ik heb de voorgestelde oplossing die hier genoemd wordt ook al geprobeerd, maar dat biedt geen oplossing.

Wellicht dat iemand aan de hand van me code een betere oplossing heeft...

Het ziet er zo uit nu:



De code ziet er zo uit:



Alvast bedankt voor oplossingen!

MR

[MueR]

We gaan geen oude koeien uit de sloot tillen (al is deze nog vers genoeg om hamburgers te maken). Zorg even voor een eigen topic met relevante code en dergelijke, zoals in de Quickstart beschreven staat.