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

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -