如果导航中的位置绝对:悬停ul，则IE9上不显示下拉菜单

我恳求你的帮助！我已经试着解决我的问题两天了。。。但没有成功：（

我的问题是关于我的CSS菜单。当我在CSS文件的"nav-li:hover-ul"部分指定"position:absolute"时，IE9上不会显示下拉菜单。但它可以在Chrome、Firefox和Safari中工作。。。如果我把它改为"position:relative"，菜单会下降，但同时显示菜单的所有宽度。。。因此，它不是一个160像素宽的子菜单，而是一个700像素宽的。。。

我也试图弄清楚它是否可以来自NivoSlider，但我没有找到任何解决方案。。。

这是我的HTML代码：

        <!DOCTYPE html>
    <html id="html">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <meta http-equiv="X-UA-Compatible" content="IE=8" />
        <meta http-equiv="X-UA-Compatible" content="IE=7" />
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <!--<script type="text/javascript" src="Javascript.js">
        </script>-->
        <link rel="stylesheet" href="style.css" />
        <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="default/default.css" type="text/css" media="screen" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
        <title>McDonough & Co. Solicitors</title>
    </head>
    <body id="wrapper">
        <header>
            <section>
                <div id="logos">
                    <img alt="Logo" src="McDonough%20logo%20copy.png">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <img alt="Accredited by the Law Institute of Victoria"
                    src="file:///C:/Users/Paul/Desktop/Charlotte/McDonough%20Solicitors%20Website/LIV_Accreditation.png">
                <div id="address">
                    <br>68 Seymour Street,<br>Traralgon, 3844<br> Victoria
                    <br><br>&#9742; (03) 5176 1000<br>
                    <a href="mailto:law@mcdonough.com.au" target="_blank">&#9993; law@mcdonough.com.au</a><br>
                </div>
                </div>
                <div style="clear:both;"></div>             
            </section>
            <nav id="gradients">
                <ul>
                    <li><a href="file:///C:/Users/Paul/Desktop/Charlotte/McDonough%20Solicitors%20Website/Home.html">Home</a></li>
                    <li><a href="aboutus.html">About us</a></li>
                    <li><a href="services.html">Services</a>
                        <ul id="gradients2">
                            <li><a href="willsestates.html">&nbsp;Wills & Estate</a></li><br>
                            <li><a href="property.html">&nbsp;Property</a></li><br>
                            <li><a href="business.html">&nbsp;Business</a></li><br>
                            <li><a href="civillitigation.html">&nbsp;Civil Litigation</a></li><br>
                        </ul>
                    </li>
                    <li><a href="usefullinks.html">Useful Links</a>
                        <ul id="gradients3">
                            <li><a href="countycourt.html">&nbsp;County Court</a></li><br>
                            <li><a href="vicmagistratescourt.html">&nbsp;Victorian Magistrates</a></li><br>
                            <li><a href="supremecourt.html">&nbsp;Supreme Court</a></li><br>
                        </ul>
                    </li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav><br>
        </header>
        <article id="bloc_page">
            <p><section class="slider-wrapper theme-default">
                <div id="slider" class="nivoSlider">
                    <img src="images/image05.jpg" alt="">
                    <img src="images/image04.jpg" alt=""/>
                    <img src="images/image06.jpg" alt=""/>
                </div>
                <script type="text/javascript">
                    $(window).load(function() {
                    $('#slider').nivoSlider();
                    });
                </script>
                <div id="baseline">
                    "Your accredited Specialist in Business Law & Property Law since 1980"<br><br><br>
                </div>
                <div id="left">
                    "Lorem ipsum dolor sit amet, erat nominati efficiendi pri cu. Mea ut simul fabulas, mea id quot admodum. No nec interesset repudiandae, in vim dolore regione, 
                    nec possit alterum forensibus ut. Qui in magna summo scripserit, cu mel agam nullam suscipiantur. Cu admodum ponderum gubergren nec, euismod consequuntur his in.
                    Id nam diam mazim persius, quem scripserit vim ad, mei cu nulla vitae. Est ex principes posidonium, libris mediocrem pro an, has sonet diceret ex. Nec cu summo constituto. 
                </div>
                <div id="right">
                    Nibh forensibus est eu, eum et hinc commodo, id justo maiestatis usu. Velit mollis assueverit pro cu.
                    Ea mea facete scripserit repudiandae. Et ubique ocurreret dissentias sea, ferri noster malorum eu vel. Aliquip admodum liberavisse sea ne, sed in nulla solet nominati. 
                    Mei an clita vivendo assueverit, omnis lorem omittam vel at. Ut bonorum scripserit vis, cum erat erroribus omittantur te, ut tacimates honestatis sea.
                </div>
            <div style="clear:both;"></div>
            </section>
        </p></article>
    <br><br>
        <footer id="footer">
            <p>
            <a href="index.html">Home |</a>
            <a href="forum.html">About us |</a>
            <a href="contact.html">Services |</a>
            <a href="contact.html">Useful Links |</a>
            <a href="contact.html">Contact</a>
            <br><br>
            © McDonough & Co. Solicitors 2012 - All rights reserved.<br><br>
            </p>
        </footer>
    </body>
    </html>

还有我的CSS代码：

        /* style.css
    ---------
    By Charlotte Routier */
    /* Structure générale */
    #html
    {
    width:740px;
    margin:auto;
    background:#e6f0fa;
    }
    /* Header */
    #logo, header h1
    {
    display: inline-block;
    margin-bottom: 20px;
    }
    /* Menu de navigation */
    nav
    {
    font-family: 'RawengulkBold';
    font-size: .9em;
    float: left;
    width: 700px;
    position:absolute;
    z-index:1200;
    -webkit-box-shadow: 0 1px 15px 0 #4a4a4a;
    -moz-box-shadow: 0 1px 15px 0 #4a4a4a;
    box-shadow: 0 1px 15px 0 #4a4a4a;
    }
    nav ul
    {
    padding: 0; /* pas de marge intérieure */
    list-style-type:none;
    text-align:center;
    left: 100%; 
    z-index:1300;
    }
    nav li
    {
    float: left;
    width:100px;
    margin-right: 40px;
    list-style-type:none;
    display:inline-block;
    }
    nav ul li a
    {
    display:inline-block;  
    width:140px;
    line-height:40px; /*hauteur de l'image de fond*/
    text-decoration:none;
    }
    nav li:hover ul, nav li li:hover ul, nav li.sfhover ul, nav li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
    {
    left:auto; /* Repositionnement normal */
    font-size: .8em;
    list-style-type:none;
    position:absolute;
    z-index:900;
    display:block;
    }
    nav li ul /* Sous-listes */
    {
    z-index:100;
    position:absolute;
    float:left;
    text-align:left;
    width: 180px; /* Largeur des sous-listes */
    left: -999em; /* Hop, on envoie loin du champ de vision */
    text-decoration: none;
    min-height: 0;
    }
    nav a
    {
    font-size: 1.3em;
    color: #000;
    text-decoration: none;
    }
    nav a:hover
    {
    text-decoration: none;
    color: #A2C9EC;
        background: #444;
        background: -webkit-linear-gradient( #555, #2C2C2C);
        background:    -moz-linear-gradient( #555, #2C2C2C);
        background:     -ms-linear-gradient( #555, #2C2C2C);
        background:      -o-linear-gradient( #555, #2C2C2C);
        background:         linear-gradient( #555, #2C2C2C);
    }
    nav a:active
    {
    text-decoration: none;
    color: #a2c9ec;
        background: #444;
        background: -webkit-linear-gradient( #555, #2C2C2C);
        background:    -moz-linear-gradient( #555, #2C2C2C);
        background:     -ms-linear-gradient( #555, #2C2C2C);
        background:      -o-linear-gradient( #555, #2C2C2C);
        background:         linear-gradient( #555, #2C2C2C);
        box-shadow: 1px 1px 10px black inset, 
                    0 1px 0 rgba( 255, 255, 255, 0.4);
    }
    #gradients {
    background-image: -webkit-linear-gradient(top, #A2C9EC 0%, #e7f2fb 100%);
    background-image:    -moz-linear-gradient(top, #A2C9EC 0%, #e7f2fb 100%);
    background-image:     -ms-linear-gradient(top, #A2C9EC 0%, #e7f2fb 100%);
    background-image:      -o-linear-gradient(top, #A2C9EC 0%, #e7f2fb 100%);
    background-image:         linear-gradient(top, #A2C9EC 0%, #e7f2fb 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#A2C9EC',endColorstr='#e7f2fb', GradientType=1);
    }
    #gradients2 {
    background-image: -webkit-linear-gradient(top, #e7f2fb 0%, #A2C9EC 100%);
    background-image:    -moz-linear-gradient(top, #e7f2fb 0%, #A2C9EC 100%);
    background-image:     -ms-linear-gradient(top, #e7f2fb 0%, #A2C9EC 100%);
    background-image:      -o-linear-gradient(top, #e7f2fb 0%, #A2C9EC 100%);
    background-image:         linear-gradient(top, #e7f2fb 0%, #A2C9EC 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e7f2fb',endColorstr='#A2C9EC', GradientType=0);
    }
    #gradients3 {
    background-image: -webkit-linear-gradient(top, #e7f2fb 0%, #A2C9EC 100%);
    background-image:    -moz-linear-gradient(top, #e7f2fb 0%, #A2C9EC 100%);
    background-image:     -ms-linear-gradient(top, #e7f2fb 0%, #A2C9EC 100%);
    background-image:      -o-linear-gradient(top, #e7f2fb 0%, #A2C9EC 100%);
    background-image:         linear-gradient(top, #e7f2fb 0%, #A2C9EC 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e7f2fb',endColorstr='#A2C9EC', GradientType=0);
    }
    /* Slideshow */
    .nivoSlider {
    background:url(/nivo-slider/themes/bar/loading.gif) no-repeat 50% 50%;
    width: 700px !important;
    height: 230px !important;
    z-index:1;
    float:center;
    position:absolute;
    display:inline-block; 
    }
    .theme-default .nivoSlider img {
    width: 700px !important;
    height: 230px !important;
    z-index:1;
    }
    /* Corps du texte */
    body
    {
    background-color: #ffffff; /* Le fond de la page sera blanc */
    color: #000; /* Le texte de la page sera noir */
    padding-left: 40px;
    padding-right: 40px;
    -webkit-box-shadow: 0 1px 15px 0 #4a4a4a;
    -moz-box-shadow: 0 1px 15px 0 #4a4a4a;
    box-shadow: 0 1px 15px 0 #4a4a4a;
    }
    #wrapper 
    {
    width:700px;
    margin:0 auto;
    }
    @font-face {
    font-family: 'Rawengulk';
    src: url('RawengulkDemibold-webfont.eot');
    src: url('RawengulkDemibold-webfont.otf') format('truetype'),
         url('RawengulkDemibold-webfont.woff') format('woff'),
         url('RawengulkDemibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('RawengulkDemibold-webfont.svg#QuadrantaBold') format('svg');
    }
    @font-face {
    font-family: 'RawengulkBold';
    src: url('RawengulkBold-webfont.eot');
    src: url('RawengulkBold-webfont.otf') format('truetype'),
         url('RawengulkBold-webfont.woff') format('woff'),
         url('RawengulkBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('RawengulkBold-webfont.svg#QuadrantaBold') format('svg');
    }
    #address
    {
    font-family: 'RawengulkBold';
    color: #000;
    font-size: 1em;
    display: inline-block;
    text-align: right;
    margin-left:20px;
    vertical-align:middle;
    line-height: 18px;
    }
    #baseline
    {
    font-family: 'RawengulkBold';
    color: #000;
    font-size: 1.2em;
    text-align: center;
    }
    #left
    {
    font-family: 'Calibri';
    color: #323232;
    font-size: .8em;
    text-align: justify;
    width: 320px;
    float:left;
    margin-left:2px;
    }
    #right
    {
    font-family: 'Calibri';
    color: #323232;
    font-size: .8em;
    text-align: justify;
    width: 320px;
    float:right;
    margin-right:2px;
    }
    img
    {
    vertical-align:middle;
    }
    p
    {
    color: #000;
    font-size: .7em; 
    font-family: 'Rawengulk';
    width:100%; /* On a indiqué une largeur (obligatoire) */
    float: right;
    text-decoration: none;
    }
    a /* Liens par défaut (non survolés) */
    {
    text-decoration: none;
    color: #000;
    }
    a:hover /* Apparence au survol des liens */
    {
    text-decoration: underline;
    color: #000;
    }
    a:active 
    {
    background-color: none;
    }
    #footer
    {
    font-size: 1.1em;
    float: center;
    text-align: center;
    }

如果您需要更多详细信息，请毫不犹豫地询问。

希望你能帮助我！非常感谢。Charlotte

附言：这里有两张图片（一张显示Chrome的下拉菜单，另一张显示IE的，不工作）

http://dl.dropbox.com/u/45202596/IE9.jpg
http://dl.dropbox.com/u/45202596/Chrome.jpg

您是否检查了绝对定位元素的父元素，以确保它是相对定位的？绝对定位的元素将相对于其父容器进行定位。如果没有指定其他声明，某些浏览器会假定父级是相对定位的。其他浏览器会把你的代码从字面上理解，而不是那么友好。您是否也可以在Firefox中使用Firebug（或类似工具）来确保元素在页面上的某个地方"显示"，并且只是位置问题？如果不是，则可能是悬停目标的渲染没有请求显示菜单。填充，显示：块；IE中的宽度/高度声明是导致这类问题的常见原因。

相关内容

最新更新

热门标签：