Nieuw lid |
|
Hoi,
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.
/* 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;}
/* 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.
Alvast heel erg bedankt,
Mvg,
Rick
Edit (10/01/2010): fixed:
#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; }
#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; }
|