[HTML/CSS] Krijg menu in IE niet goed

[Verwijderd]

Heb de volgende pagina..

In Firefiox doet ie het helemaal goed, maar in IE flipt het hele menu, als je een submenu (onder 'home' en 'service') wilt openen.. Heb van allerlei dingen geprobeerd met floats en positions, maar dat mocht niet baten..

Iemand een idee waar dit aan kan liggen??

Edit:
HTML:

code:

<ul class="mainMenu">
            <li style="width:95px;"><a href="#" class="navItem">Home</a>
            <ul class="navMenu">
                <li><a href="#" class="navItem">bla</a>
            </ul>       
          </li>
          <li style="width:110px;"><a href="#" class="navItem">Service en Garantie</a>
            <ul class="navMenu">
                <li><a href="#" title="Professioneel" class="navItem">Professioneel</a></li>
              <li><a href="#" title="Gebruiksaanwijzing" class="navItem">Gebruiksaanwijzing</a></li>
              <li><a href="#" title="Legitimatie" class="navItem">Legitimatie</a></li>
              <li><a href="#" title="Waarborgsom" class="navItem">Waarborgsom</a></li>
              <li><a href="#" title="Schade-afkoopregeling" class="navItem">Schade-afkoopregeling</a></li>
            </ul>
          </li>
          <li style="width:95px;"><a href="#" class="navItem">Verhuur</a></li>
          <li style="width:115px;"><a href="#" class="navItem">Algemene voorwaarden</a></li>
          <li style="width:120px;"><a href="#" class="navItem" style="border:0;">Werken bij Formido</a></li>
        </ul>

CSS:

code:

/* Hoofdmenu */
ul.mainMenu {
 margin: 7px 0 3px 10px; 
 padding: 3px 0;
 height: 46px;
 list-style: none;
}
html>body ul.mainMenu {
 height: 40px;
}
ul.mainMenu li {
 margin: 0;
 padding: 0;
 display:block;
 float: left;
 height: 40px; 
}
ul.mainMenu li.menu-last {
 border: 0;
}
ul.mainMenu li a {
 margin: 0;
 padding: 0;
 padding-top: 3px;
 display: block;
 height: 37px;
 text-align: center;
 font: 13px Verdana, Helvetica, Arial, Trebuchet MS,Serif;
 color: black;
 font-weight: bold;
 text-decoration: none; 
 border-right: 2px solid #fa0010;
}

/*          Sub Navigation
=========================================*/
ul.navMenu {
 padding-bottom: 3px;
 display: none;
 position: relative;
 top: 5px;
 left: -40px;
 border: 2px solid #fde502;
 height: auto;
 width: 150px; 
 z-index:3;
 background:#fb0111;
} 
html>body ul.navMenu {
 float: left;
 left: 0;
}
ul.navMenu li {
 margin: 0;
 padding: 0;
 display: block; 
 float: left;
 height: 24px; 
 border: 0;
}
ul.navMenu li a {
 margin: 3px 1px 0 0;
 padding: 3px 1px 3px 20px;
 clear: both;
 display: block; 
 height: 15px;
 width: 169px;
 font-size: 11px;
 text-align: left;
 font-weight: normal;
 text-decoration: none;
 color: white;
 background: #fb0111 url(../img/bullet.gif) no-repeat center left;
 border: 0;
}
html>body ul.navMenu li a {
 margin-left: -40px;
}
ul.navMenu li a:hover {
 background: #fde502 url(../img/star.gif) no-repeat center left;
 color: black;
}

.showMenu { display:block !important; }
.hasSubMenuActive {

}
.menuEnd { clear:both; }

[ Voor 112% gewijzigd door Verwijderd op 25-03-2005 14:38 ]

[Verwijderd]

Het zou wel prettig zijn als jij dan even de relevante code kan geven want ik heb niet zo'n zin dat allemaal na te pluizen

edit
zo is het al wat beter ja

[ Voor 16% gewijzigd door Verwijderd op 25-03-2005 14:52 ]

[Verwijderd]

Het probleem is, wat ik zo kan bekijken, dat het submenu breder is dan het hoofdmenu, waardoor, als een submenu word geopend, de <ul> van het hoofdmenu dezelfde breedte krijgt als het submenu.. daardoor schuift de hele boel op..

Maar ik vind het gek dat dat gebeurt, omdat het gewoon aparte classes zijn, die elkaar niet in de weg zitten..

[Verwijderd]

Niet dat het daardoor komt maar je vergeet hier een <li> af te sluiten met </li>:

code:

            <ul class="navMenu">
                <li><a href="#" class="navItem">bla</a>
            </ul>

[El_BingO]

Komt door je position relative van je navMenu denk ik. Die neemt ruimte in. Zodra je het zichtbaar maakt, gaat alles naar rechts. Dat is bij position absolute niet zo.
Maak hem absolute en probeer hem met margins goed te krijgen!

[Verwijderd]

met absolute lukt dat niet, want dan staat hbet submenu altijd op dezelfde plek op de pagina.. dat gaat dus niet werken (en werkt dus ook niet)

[Sappie]

Verwijderd schreef op vrijdag 25 maart 2005 @ 16:46:
met absolute lukt dat niet, want dan staat hbet submenu altijd op dezelfde plek op de pagina.. dat gaat dus niet werken (en werkt dus ook niet)

absoluut positioneren gebeurt ten opzichte van het absoluut of relatief gepositioneerde parent - element. Dit is dus niet noodzakelijk het body element en daardoor zeker geschikt voor een soortgelijk menu.

kijk maar es naar bijv. suckerfish menu's: http://www.google.nl/sear...&btnG=Google+zoeken&meta=

Verder.. ga je eerst maar es beter verdiepen in CSS (nofi), want dan wist je dit wel

[ Voor 32% gewijzigd door Sappie op 25-03-2005 19:05 ]

[Verwijderd]

Verander het volgende eens in je CSS. Zo zou het volgens mij moeten werken

Cascading Stylesheet:

ul.navMenu {
    padding-bottom: 3px;
    position: absolute;
    top: auto;
    left: auto;
    margin-left:-40px;
    margin-top:5px;
    border: 2px solid #fde502;
    height: auto;
    width: 150px; 
    z-index:3;
    background:#fb0111;
} 

[Verwijderd]

Hartstikke bedankt.. Deze code doet het idd (na wat kleine aanpassinkjes).. dan ben ik toch wel benieuwd wat ik nu fout deed, toen ik het zelf probeerde met position:absolute;

maar goed.. hij doet het nu.. tnx!