Submenu in IE7

[Verwijderd]

Hallo medetweakers,

Ik probeer een submenu goed werkend te krijgen in IE7. Helaas kom ik er niet uit en hoop dat jullie me een handje verder kunnen helpen.

Zo ziet het menu er in de overige browsers (IE8, etc.) uit:



Zo ziet het menu er uit in IE7:



Hierbij mijn CSS voor het menu

code:

#menu{
    width:1151px;
    float:left;
}

.horizontalmenu ul.menu{
    height:45px;
    width:1151px;
    background:#0d141a;
    position:relative;
    z-index:200000;
}

.horizontalmenu ul.menu li{  
    margin:0;
    position:relative;
    height:45px;
    float:left;
    border-right:1px solid #393e43;
    white-space:nowrap;
}

.horizontalmenu ul.menu li:hover{  
    background:#04467c;
}

.horizontalmenu ul.menu li a.first{  
}

.horizontalmenu ul.menu li a{
    display:inline-block;
    font:normal 14px/45px 'Open Sans', Verdana, Geneva, sans-serif;
    color:#77c5ed;
    text-decoration:none;
    float:left;
    position:relative;
    height:45px;
    padding:0 16px 0 16px;
}

.horizontalmenu ul.menu li a:hover{
    color:#fff;
}

.horizontalmenu ul.menu li ul.sub-nav{
    width:auto;
    top:45px;
    margin:0;
    display:none;
}

.horizontalmenu ul.menu li:hover ul.sub-nav{
    display:block;
}

.horizontalmenu ul.menu li ul.sub-nav li{
    clear:both;
    width:100%;
    height:auto;
    margin:0;
    border:0;
}
 
html .horizontalmenu ul.menu li ul.sub-nav li a {  
    display:inline-block;
    width:84%;
    white-space:nowrap;
    margin:0;
    padding:0 8%;
    background:#0d141a;
    border-top:1px solid #2e79b4;
}

html .horizontalmenu ul.menu li ul.sub-nav li a:hover {  
    color:#fff;
    background:#04467c;
}

Ik heb de Modernizr plugin ook voor eventuele aanpassing

[Zoefff]

Begin eens met het maken van een simpelere variant van je menu om te kijken waar het probleem precies vandaan komt. Dus bijvoorbeeld alle breedtes achterwege laten en kijken hoe het er dan uit ziet.

Mijn vermoeden is dat je tegen een verschil in "default" CSS aan kijkt. Bijvoorbeeld met margins / paddings die IE7 standaard op listelementen heeft, in tegenstelling tot IE8 en andere browsers. Zoek eens naar een "reset" of "normalize" CSS project waarbij de default styling van elementen als headings, lists, forms, etc. gelijk getrokken wordt zodat je een goede uitgangspositie hebt. Vervolgens kan je vanuit daar bekijken wat er nog voor verschillen overblijven en tegen welke browserbugs je aan loopt.

Let wel op met zogenaamde "reset" scriptjes. Veel daarvan hebben de neiging om botweg alle standaardwaarden op 0 te zetten, daar schiet je vaak ook weinig mee op. Een "normalize" script (zie bijvoorbeeld normalize.css) is een zinniger alternatief, behalve dan dat dit voorbeeld geen ondersteuning biedt (of rekening houdt met) IE<8.

[noes]

Dit lijkt te komen door de float op de anchors in het submenu, zet die eens uit? Ook is het wellicht verstandiger om de breedte vast te zetten in px, dat wil ook wel helpen in IE7.

.horizontalmenu ul.menu li ul.sub-nav li a{
float: none;
}