IE 7/8 CSS Menu Problème

Question

J'ai un problème étrange avec mon menu déroulant CSS. Il apparaît, mais il est caché derrière un autre élément, et il y a un espace croissant entre les éléments de la liste.

code CSS est assez standard:

/*CSS Menu*/ 
#navigation li.menu ul 
{ 
    visibility: hidden; 
    position: absolute; 
    top: 40px; 
    right: 5px; 
    height: 15px; 
    padding-top: 10px; 
} 
#navigation li.menu:hover ul 
{ 
    visibility: visible; 
} 
#navigation li.menu ul li 
{ 
    border: 1px solid gray; 
    border-top: none; 
    border-bottom: 1px dotted #ccc; 
    z-index: 999999; 
    position: relative; 
} 
#navigation li.menu ul > li > a 
{ 
    padding: 2px 5px 2px 5px; 
    background-color: blue; 
    text-align: right; 
    display: block; 
    color: black; 
    background: white; 
} 
#navigation li.menu ul li a:hover 
{ 
    color: white; 
    background: #ccc; 
} 
#navigation li.menu ul li a:visited 
{ 
    color: black; 
} 

Comme le code Fix IE:

#navigation li.menu ul li 
{ 
    border: 1px solid gray; 
    border-top: none; 
    border-bottom: 1px dotted #ccc; 
    z-index: 999999999; 
    position: relative; 
    background-position: 0 0; 
} 
#navigation li.menu ul > li > a 
{ 
    padding: 2px 5px 2px 5px; 
    background-color: blue; 
    text-align: right; 
    display: block; 
    color: black; 
    background: white; 
} 

code HTML pour le menu:

<code> 
    <div id="navigation" style="border: 0px solid #000; float: right;"> 
    <ul > 
     <li class="top"><a href="index.php"><span class="left"></span><span class="right">Home</span></a></li> 
     <li class="top"><a href="storage.php"><span class="left"></span><span class="right">Storage</span></a></li> 
     <li class="top"><a href="advertiser-info.php"><span class="left"></span><span class="right">Advertisers</span></a></li> 
     <li class="top"><a href="supplies.php"><span class="left"></span><span class="right">Supplies</span></a></li> 
     <li class="top"><a href="franchise-opportunities.php"><span class="left"></span><span class="right">Franchise Opportunities</span></a></li> 
     <li class="menu top"><a href="about-us.php"><span class="left"></span><span class="right">About Us</span></a>  
     <ul> 
      <li><a href="./contact-us.php">Contact Us</a></li> 
      <li><a href="./history.php">Company History</a></li> 
      <li><a href="./guarantee.php">Customer Guarantee</a></li> 
      <li><a href="./faq.php">FAQ</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</code> 

Answer 1

Dans IE8, l'exemple de code que vous fournissez fonctionne comme prévu - le menu contextuel est affiché en haut du menu statique.

Dans Firefox, c'est une histoire similaire, sauf que les puces sont en dehors du fond blanc, de sorte qu'ils ont l'air désordonné sur le texte du menu statique.

Answer 2

Cela dépend de ce que l'autre element est et le reste des éléments DOM entourant ce bloc div.

S'il s'agit d'un élément flash, vous devrez peut-être utiliser JavaScript pour empêcher cet élément flash de masquer la liste déroulante CSS.

De même, vérifiez les styles du reste de vos éléments DOM pour vous assurer qu'aucun d'entre eux n'est configuré pour flotter. Parfois, des objets flottants peuvent également provoquer cela.

Désolé, il est difficile d'être plus précis. J'ai copié votre code et fait une page HTML rapide avec seulement ce bloc div et le CSS que vous avez collé et en le regardant dans Firefox il n'y a pas d'espace, croissant ou autre, et le menu déroulant se trouve au-dessus du menu principal. Tout semble normal.

Firefox version: Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv: 1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729)

Modifier : Est-ce un problème dans IE7/8 seulement?