[css][ie] suckerfish submenu vreemd

[koekiemonster]

Beste,

Ik ben bezig met een leuke site, momenteel IE only, mozilla komt wel [ziet er nu inderdaad niet uit!], maar het menu reageert erg vreemd.
De code is gewoon het suckerfish menu wat ongeveer de hele wereld gebruikt.
Echter ik wil het submenu wat over het hoofdmenu laten schuiven.
Dit gebeurd nu ook, alleen het hoofdmenu van een onderliggend item wordt als hogere laag getoond.

Ik heb de css inline geplaatst.
http://demo.lynx-media.nl/nudi/

Het probleem doet zich voor als je over bijvoorbeeld: Geleedpotigen of Holtedieren gaat.
Normaal los ik dit op met position:absolute en eventueel wat z-index aanpassingen, maar het lijkt wel alsof dit nergens helpt...
Ik zit me al de hele dag suf te staren...

HTML:

#left ul {
margin:0;
padding: 0;
padding-left: 5px;
list-style: none;
width: 205px; /* Width of Menu Items */
}
            
#left ul li {
    position: relative;
}
                
#left li ul {
    position: absolute;
    left: 159px; /* Menu above toplevel menu */
    top: 8px;
    display: none;
    z-index:5;
}
            
/* Styles for Menu Items */
#left ul li a, #left ul li#active ul li a, #left ul li#active ul li a:visited {
     background:#001E55 url(img/li.gif) left 0.8em no-repeat;
         text-transform: uppercase;
    display: block;
    text-decoration: none;
    font-weight:bold;
    color: #489ed3;
    padding:7px 10px 7px 21px;
}
#left ul li ul li a, #left ul li#active ul li a, #left ul li#active ul li a:visited {
    background:#001E55;
    margin:0;
    padding:3px;
    text-transform: uppercase;
    filter:alpha(opacity=90);
    opacity: 0.9;
     -moz-opacity:0.9;
}

#left ul li a:visited {
    color:#5e6d7b;
}
            
/* Fix IE. Hide from IE Mac \*/
* html #left ul li { float: left; height: 1%; }
* html #left ul li a { height: 1%; }
/* End */
            
#left ul li a:hover, #left ul li#active ul li a:hover { color: #001E55; background: #489ed3; } /* Hover Styles */
                    
#left li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
                    
#left li:hover ul, #left li.over ul {display: block; } /* The magic */  
            
                
#left ul li#active a, #left ul li#active a:visited
{ 
    background:#001E55 url(img/li-active.gif) left 0.8em no-repeat;
    display: block;
    text-decoration: none;
    font-weight:bold;
    color: #E0EFFD;
    padding:7px 10px 7px 21px;
}

code voor IE om hover effect te creeeren:

JavaScript:

// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

Kortom, niets vreemds, gewoon een standaard menu.
Al is het maar een hint, ik snap gewoon niet waarom het submenu nu niet geheel getoond wordt.

[moozzuzz]

heb nog niet gechecked met jouw site, maar vrees het volgende voor jou (heeft me vorige week meer dan een dag gekost om dit uit te vissen):

IE (6.x;XP) kijkt bij de hovers naar de volgorde (in je HTML) van je elementen. In mijn geval was het de achtergrond-image van de titel in een content-blok die door het submenu heen piepte. In jouw geval komt de volgende hoofdmenu-<li> (level hoofdmenu 2) ná de submenu-<li>'s (level submenu 1.1 en 1.2). Daardoor rendert IE het hoofdmenu 2 boven je submenu's.

code:

<ul hoofdmenu>
<li hoofdmenu 1>
   <ul submenu>
   <li submenu 1.1>
   <li submenu 1.2>
   </ul></li>
<li hoofdmenu 2>...</li>
<li hoofdmenu 3>...</li>
</ul>

Ik heb het zelf niet werkend gekregen in IE zonder mijn [horizontaal] menu (in de code) onder de content te plaatsen... In jouw geval zou ik niet weten hoe dit op te lossen. Er is wel een tweede versie van dit menu (son of ...) maar dat heb ik nog niet geprobeerd.

[XWB]

css dient voor opmaak, niet om menu's te laten weergeven. Kortom, gooi deze aanpak overboord en kijk naar een javascript oplossing. Deze voorbeelden van crisp werken perfect en die gebruik ik ook altijd:

http://therealcrisp.xs4all.nl/upload/menu.html
http://therealcrisp.xs4all.nl/upload/menu_hori.html

[koekiemonster]

Hacku schreef op woensdag 03 januari 2007 @ 18:40:
css dient voor opmaak, niet om menu's te laten weergeven. Kortom, gooi deze aanpak overboord en kijk naar een javascript oplossing. Deze voorbeelden van crisp werken perfect en die gebruik ik ook altijd:

http://therealcrisp.xs4all.nl/upload/menu.html
http://therealcrisp.xs4all.nl/upload/menu_hori.html

Het menu wat ik gebruikte, liet de menuitems ook tonen en hiden door middel van JS.
Ik heb nu bovenstaand menu geimplementeerd en geeft exact dezelfde fout. Het probleem zit hem in de css, maar ik snap niet precies waar.

[StratoFarmer]

Je website is nogal IE-only trouwens, de layout in firefox is compleet verkeerd. Dit lijkt mij niet wenselijk.

[koekiemonster]

StratoFarmer schreef op zaterdag 06 januari 2007 @ 15:13:
Je website is nogal IE-only trouwens, de layout in firefox is compleet verkeerd. Dit lijkt mij niet wenselijk.

zie startpost... wordt nog aan gewerkt.

probleem nu is dat de active link wordt meegenomen in het sub-menu.