Problèmes de navigation dans Internet Explorer 7

Question

Je travaille sur un site doté d'une barre de navigation horizontale avec des menus déroulants. Cela a été construit par un autre développeur qui ne travaille plus sur le projet. Les listes déroulantes "drop" et peuvent être cliqué sur bien dans FireFox et IE8 mais dans IE7 les dropdowns tombent mais disparaissent dès que vous essayez et passez la souris sur eux.

Voici le code pour la navigation:

<ul> 
    <li ><a href="index.html">Home</a></li> 
    <li><a href="#">Company</a> 
    <ul> 
     <li><a href="company-aboutus.html">About Us</a></li> 
     <li><a href="company-locations.html">Locations</a></li> 
     <li><a href="company-careers.html">Careers</a></li> 
     <li><a href="company-isoqsquality.html">ISO &amp; QS Quality</a></li> 
     <li><a href="company-regulation.html">Regulations</a></li> 
     <li><a href="http://www.unionink.com" target="_blank">Union Ink</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Products</a> 
    <ul> 
     <li><a href="printing-main.html">Screen Printing Products</a></li> 
     <li><a href="automotive-main.html">Automotive Products</a></li> 
     <li><a href="industrial-main.html">Industrial Products</a></li> 
    </ul> 
    </li> 
    <li><a href="#">News &amp; Events</a> 
    <ul> 
     <li><a href="news-rutland.html">Rutland News</a></li> 
     <li><a href="news-newproducts.html">New Products</a></li> 
     <li><a href="news-tradeshowschedule.html">Trade Show Schedule</a></li> 
     <li><a href="news-dealerseminars.html">Dealer Seminars</a></li> 
     <li><a href="news-industrylinks.html">Industry Links</a></li> 
    </ul> 
    </li> 
    <li><a href="faq.html">FAQ's</a> </li> 
    <li><a href="#">Dealers</a> 
    <ul> 
     <li><a href="printing-northamerican.html">North America</a></li> 
     <li><a href="printing-international.html">International</a></li> 
    </ul> 
    </li> 
    <li class="last"><a href="contactus-main.html">Contact</a> </li> 
</ul> 

Voici le CSS:

#pageHeader ul{position: absolute; bottom: 0; left: 0; width: 997px; background: transparent url(../images/nav-background.gif) top left no-repeat; height: 29px;} 
#pageHeader ul li{float: left; position: relative;} 
#pageHeader ul li a{display: block; float: left; font-size: 16px; font-family: Tahoma, Arial, sans-serif; text-decoration: none; color: #FFF; padding: 0 35px; background: transparent url(../images/nav-divider.gif) right center no-repeat; height: 29px; line-height: 29px;} 
#pageHeader ul li.last a{background: none;} 

#pageHeader ul li a:hover, 
#pageHeader ul li.active a{color: #00BCE4;} 
#pageHeader ul li ul{width: auto; background-color: #FFF; height: auto; display: none; position: absolute; top: 29px; left: 0; width: 190px;} 
#pageHeader ul li:hover ul{display: block;} 
#pageHeader ul li ul li{float: none; display: block; background-color: #FFF; border: 1px solid #CDCED0; border-top: 0;} 
#pageHeader ul li ul li a{float: none; background: none; color: #231F20; padding-bottom: 3px; font-size: 12px; white-space: nowrap;} 
#pageHeader ul li ul li a:hover{background-color: #58595B;} 

Je vous serais reconnaissant de l'aide à obtenir la navigation fonctionne correctement dans IE7.

Merci.

Answer 1

Merci à tous ceux qui ont répondu. J'ai reçu de l'aide au DocType qui a répondu à la question. Il s'est avéré que tout ce dont j'avais besoin était le suivant:

#pageHeader ul li ul li { width:250px; display: block; background-color: #FFF; border: 1px solid #CDCED0; border-top: 0;} 

Answer 2

Il semble que dans IE7, lorsque je déplace ma souris sur le menu déroulant, le navigateur pense que ma souris quitte le LI (qui remet l'affichage à 'none').

Answer 3

L'astuce utilise display: none ou display: block dans le css. Donc, une UL sous un LI sous un UL sera cachée à moins que ce LI soit plané.

Le problème est que IE7 ne supporte pas la classe hover psuedo pour LI, uniquement les liens.

Alors ....

simplement envelopper le LI qui apparaît le sous-menu dans un lien et placez le vol stationnaire au lien.

#pageHeader ul a li ul{ display: none; } 
#pageHeader ul a:hover li ul{display: block;} 

et qui devrait fonctionner