IE 8菜单下拉问题

时间：2013-02-12 14:01:10

标签： css internet-explorer menu

菜单不会像在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 -->

1 个答案:

答案 0 :(得分：0)

“z-index：x;”解决了CSS下拉菜单和jQuery滑块（幻灯片放映/轮播）之间的冲突。很容易解决许多人似乎遇到的问题。

尝试将其放在下拉ul。的CSS样式下。

实施例

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

你可以玩数字（x）。

相关问题
最新问题