html - CSS Drop down menu on Internet Explorer 7 bug -
i have css drop down menu built, working of course in firefox , chrome. on internet explorer 7 , 8, drop down moved right making impossible click links.
i made jsfiddle here : http://jsfiddle.net/xmrpe/
and screenshot of under ie7 here : http://s16.postimg.org/g90wthb2t/image.png
here html :
<div class="menu"> <ul> <li> <a href="#">la meunerie française</a> <ul> <li style="margin-left:0;"><a href="conseil.php">conseil d'administration</a></li> <li style="margin-left:0;"><a href="syndicats.php">syndicats régionaux</a></li> <li style="margin-left:0;"><a href="equipe.php">l'équipe</a></li> </ul> </li> <li> <a href="#">la filière</a> <ul> <li style="margin-left:0;"><a href="entites_analyse.php">entités techniques de la meunerie</a></li> <li style="margin-left:0;"><a href="meunerie_europe.php">meunerie européenne</a></li> <li style="margin-left:0;"><a href="horsue.php">meunerie hors ue</a></li> <li style="margin-left:0;"><a href="organisations.php">organisations professionnelles</a></li> <li style="margin-left:0;"><a href="intercereales.php">intercéréales</a></li> <li style="margin-left:0;"><a href="franceagrimer.php">franceagrimer</a></li> </ul> </li> <li> <a href="#">les moulins</a> <ul> <li style="margin-left:0;"><a href="regions-meunieres.php">régions meunières</a></li> <li style="margin-left:0;"><a href="regions-administratives.php">régions administratives</a></li> <li style="margin-left:0;"><a href="farines.php?farine_id=">farines & produits commercialisés</a></li> <li style="margin-left:0;"><a href="groupements.php">groupements meuniers</a></li> </ul> </li> <li> <a href="#">fournisseurs</a> <ul> <li style="margin-left:0;"><a href="fournisseurs-rubrique.php">rubrique</a></li> <li style="margin-left:0;"><a href="fournisseurs-alphabetique.php">liste alphabétique</a></li> </ul> </li> </ul> </div>
the css :
.menu { width:100%; height:55px; float:left; position:relative; z-index: 1000; background-color: #5c4a29; } .menu ul { list-style: none; padding-top:7px; font-size: 11px; } .menu ul li { float:left; margin-left:55px; } .menu ul li { color:#ffffff; padding-bottom:25px; } .menu ul li a:hover, .menu ul li a.actif, .menu ul li:hover > a{ color:#ddd3aa; } .menu ul ul { display:none; } .menu ul li:hover > ul { display: block; position:absolute; z-index: 10000; width:210px; padding-bottom:20px; top:55px; -webkit-border-radius: 0px 10px 0px 10px; border-radius: 0px 10px 0px 10px; background-color: #5c4a29; } .menu ul ul li { width:190px; padding-left:10px; float: left; margin-top:10px; } .sidebar { width:225px; min-height:400px; float:left; position:relative; }
i can't see why isn't working correctly.
any appreciated. in advance !
sébastien
for 1 on line 37 in css change top 55 45 can select links. on line 1 change height 45.
.menu ul li:hover > ul { display: block; position:absolute; z-index: 10000; width:210px; padding-bottom:20px; top:45px; -webkit-border-radius: 0px 10px 0px 10px; border-radius: 0px 10px 0px 10px; background-color: #5c4a29; } .menu { width:100%; height:55px; float:left; position:relative; z-index: 1000; background-color: #5c4a29; }
Comments
Post a Comment