IE 8 menu drop down issue

Question

Меню не выпадают, как в IE7.Каждый поможет ... пожалуйста !?

Вы должны нажать на заголовок, чтобы он отображался, иначе меню скрыто.

CSS ниже:

#top_nav{ width: 810px; float: left; background: #DADADA; margin: 0; position: relative; z-index: 100; padding: 0;} 
#top_nav ul {margin: 0 0 0 10px; padding: 0; list-style: none; float: left; width: 800px; height: 40px; } 
#top_nav li {float: left; margin: 0; padding: 0; width: auto; font-weight: normal; cursor: pointer; white-space: nowrap; font-size: 100%; color: #000; line-height: 150%;} 
#top_nav li a{text-decoration: none; color: #000; width: auto; display: block; padding: 8px 18px 7px 18px; line-height: 25px; text-align: center; font-weight: normal; } 



#top_nav li ul {position: absolute; left: -999em; height: auto; width: 234px; w\idth: 224px; font-weight: normal; padding: 0px 0 0 0; margin: 0 0 0 0; border-bottom: 1px solid #aaa; } 
#top_nav li li {padding: 0; background-color: #DADADA; font-size: 90%; line-height: 120%;} 

#top_nav li li a{line-height: auto; text-align: left; width: 212px; w\idth: 202px; padding: 3px 10px; border-top: 1px solid #aaa; border-left: 1px solid #aaa; border-right: 1px solid #aaa; } 
#top_nav li li a:hover{ background-color: #92D400; color: #fff;} 

#top_nav li:hover ul ul, #top_nav li:hover ul ul ul, #top_nav li.sfhover ul ul, #top_nav li.sfhover ul ul ul {left: -999em;} 
#top_nav li:hover ul, #top_nav li li:hover ul, #top_nav li li li:hover ul, #top_nav li.sfhover ul, #top_nav li li.sfhover ul, #top_nav li li li.sfhover ul { left: auto;} 
#top_nav li:hover, #top_nav li.sfhover, #top_nav a.active{ background-color: #92D400; } 

#sub_nav{ background: #002F5F; float: left; width: 810px; margin: 0; } 
#sub_nav ul{ float: left; width: 790px; margin: 0 0 0 10px; padding: 0; list-style: none; } 
#sub_nav li{ float: left; margin: 0; padding: 0; font-size: 90%; font-weight: bold; text-align: center; } 
#sub_nav li a{ color: #fff; display: block; height: 105px; padding: 8px 30px 0 30px; text-decoration: none; } 
#sub_nav li a:hover, 
#sub_nav li a.active{ background-color: #DADADA; color: #002F5F; } 

#section_nav{ float: left; margin: 1px 0 0px 0; width: 810px; background: #002F5F; } 
#section_nav ul{ float: left; width: 808px; margin: 0; padding: 0; list-style: none; } 
#section_nav li{ float: left; margin: 0; padding: 0; font-size: 70%; font-weight: bold; } 
#section_nav li a{ color: #fff; display: block; padding: 8px 10px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; text-decoration: none; } 
#section_nav li a:hover, 
#section_nav li a.active{ background: #92D400;} 
#section_nav img{ float: left; margin: 2px 0 0 2px;} 

---

В выпадающие не работают автоматически в IE8, и вы также должны нажать на название для того, чтобы показать.

HTML, которые перечислены ниже:

<link href="css/stylesheet.css" rel="stylesheet" type="text/css"> 

<script type="text/javascript" src="js/jquery.min.1.7.1.js"></script> 

<link rel="stylesheet" href="js/nivo-slider/nivo-slider.css" type="text/css" media="screen" /> 
<script src="js/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script> 

<script type="text/javascript"> 
jQuery(window).load(function() { 
var total = jQuery('#slider img').length; 
var rand = Math.floor(Math.random()*total); 
jQuery('#slider').nivoSlider({ 
    animSpeed: 1000, // Slide transition speed 
    pauseTime: 4000, // How long each slide will show 
    directionNav: false, 
    effect: 'boxRainGrow' 
}); 

}); 
</script> 

<script type="text/javascript"> 
$(function(){ 
    $('a[href*=#]').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
     && location.hostname == this.hostname) { 
      var $target = $(this.hash); 
      $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); 
      if ($target.length) { 
       var targetOffset = $target.offset().top; 
       $('html,body').animate({scrollTop: targetOffset}, 500); 
       return false; 
      } 
     } 
    }); 
}); 
</script> 

</head> 

<body> 

<a name="top"></a> 

<div id="wrap"><!-- START OF WRAP --> 

    <div id="header"><!-- START OF HEADER --> 
     <a href="http://thehub/livelinkprod/llisapi.dll/intranet/9555529/" class="hub"><img src="images/buttons/btn_back_to_hub.png" width="117" height="27" border="0"></a> 

     <img src="images/txt/txt_global_energy_transformation.png" width="361" height="43" id="logo"> 

    <br clear="all"> 

     <div id="slider" class="nivoSlider"> 
      <a href="http://thehub/livelinkprod/llisapi.dll/intranet/9530498//index.htm?nodeid=9530361&vernum=0" target="_blank"><img src="images/headers/New-org-chart.png" width="730" height="162"></a> 
        <a href="http://thehub/livelinkprod/llisapi.dll/fetch/2000/9697/5358303/9288735/appointments-vacancies.html"><img src="images/headers/New-appointments.png " width="730" height="162"></a></div> 
    </div><!-- END OF HEADER --> 

    <div id="top_nav"><!-- START OF TOP NAVIGATION --> 
      <ul> 
       <li><a href="index.html" class="active">Home</a></li> 
       <li><a href="#">GET Information</a> 
        <ul> 
         <li><a href="latest-news.html">Latest news</a></li> 
         <li><a href="appointments-vacancies.html">Appointments &amp vacancies</a></li> 
         <!-- <li><a href="blogs.html">Blogs</a></li> --> 
         <li><a href="change-champions-smes.html">Change champions &amp; SMEs</a></li> 
         <li><a href="stakeholders.html">Stakeholders</a></li> 
        </ul> 
       </li> 
       <li><a href="get-involved.html">GET Involved</a></li> 
       <li><a href="#">GET Answers</a> 
<ul> 
    <li><a href="get-answers.html">General</a></li> 
    <li><a href="get-answers-structure.html">Service line-specific</a> 
</ul> 
</li> 
       <li><a href="mailto:get@lr.org?subject=Global Energy Transformation - Site Enquiry">GET in touch</a></li> 
       <li><a href="service-lines.html">Service lines/functions</a> 
        <ul> 
         <li><a href="inspection-services.html">Inspection services</a></li> 
         <li><a href="compliance-services.html">Compliance services</a></li> 
         <li><a href="asset-integrity-services.html">Asset integrity services</a></li> 
         <li><a href="drilling-integrity-services.html">Drilling integrity services</a></li> 
         <li><a href="consultancy-services.html">Consultancy services</a></li> 
         <li><a href="business-development-services.html">Business development services</a></li> 
         <li><a href="business-services.html">Business services</a></li> 
         <li><a href="finance.html">Finance</a></li> 
         <li><a href="human-resources.html">Human resources</a></li> 
<li><a href="technology.html">Technology</a></li> 
<li><a href="strategic-projects.html">Strategic projects</a></li> 
        </ul> 
       </li> 
      </ul> 
    </div><!-- END OF TOP NAVIGATION --> 

Answer 1

"Z-индекс: х;" разрешил мой конфликт между раскрывающимися меню CSS и слайдером jQuery (слайд-шоу/карусель). Это было легкое решение проблемы, с которой многие люди сталкиваются.

Попробуйте поместить это под стиль CSS для раскрывающегося ul.

Пример

.navbar ul .subnav { 
display: none; 
z-index: 3; 
} 

Вы можете играть вокруг с номером (х).