Javascript 为什么这个菜单在IE中表现得很糟糕?紧急求救信号

Javascript 为什么这个菜单在IE中表现得很糟糕?紧急求救信号,javascript,css,internet-explorer,navigation,Javascript,Css,Internet Explorer,Navigation,我希望有人能帮忙。这让我快发疯了 您可以在上看到我遇到问题的页面 除了Internet Explorer(所有版本都有问题)外,下拉菜单在任何地方都可用 代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link href='http://fonts.googleapis.com/css?

我希望有人能帮忙。这让我快发疯了

您可以在上看到我遇到问题的页面

除了Internet Explorer(所有版本都有问题)外,下拉菜单在任何地方都可用

代码:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href="css/navcss.css" rel="stylesheet" type="text/css"/>
<link href="css/csstest2.css" rel="stylesheet" type="text/css">


<script src="JavaScript/jq.js" type="text/javascript"></script>
<script src="JavaScript/easing.js" type="text/javascript"></script>
<script src="JavaScript/color.js" type="text/javascript"></script>
<script src="JavaScript/navjs.js" type="text/javascript"></script>
<script src="JavaScript/mainTest2.js" type="text/javascript"></script>

</head>

<body>

<div id="container"> 

        <div id="header">
                <img src="images/Logos/logo.png" id="logo" alt="Sinclairs Solicitors Logo"/>
                <img src="images/Logos/conveyancingqualitylogo.gif" id="conveyancingQuality" alt="Conveyancing Quality"/>
        <div id="motto">
                        <p>

                            <span id="motto1">Professional</span>
                            <span id="motto2">Experienced</span>
                            <span id="motto3">Approachable</span>

                        </p>
                            </div>
        </div>

        <div id="nav"><div id="navBar"> 
            <ul> 
                <li id="aboutUsHeading"class="menuItem"><a href="#">about Us</a></li>

                <li id="teamMenuHeading" class="menuItem">
                    <a href="#">the team</a>
                        <ul>
                            <li class="subMenuItem"><a href="#">Henry Drucker</a></li>                                
                            <li class="subMenuItem"><a href="#">Joanna Yianni</a></li>
                        </ul>
                </li>

                <li id="servicesMenuHeading" class="menuItem">
                    <a href="#">services</a>
                         <ul>
                            <li class="subMenuItem"><a href="#">Residential Property</a></li>                            
                            <li class="subMenuItem"><a href="#">Commercial Property</a></li>
                            <li class="subMenuItem"><a href="#">Company Commercial</a></li>
                            <li class="subMenuItem"><a href="#">Landlord and Tenant</a></li>
                            <li class="subMenuItem"><a href="#">Wills</a></li>
                            <li class="subMenuItem"><a href="#">Trust and Probate</a></li>
                            <li class="subMenuItem"><a href="#">Family Life</a></li>
                            <li class="subMenuItem"><a href="#">Employment</a></li>
                            <li class="subMenuItem"><a href="#">General Litigation</a></li>
                            <li class="subMenuItem"><a href="#">Personal Injury</a></li>
                        </ul>
                </li>

                <li id="contactMenuHeading" class="menuItem"><a href="#">contact us</a>
                        <ul>
                            <li class="subMenuItem"> <a href="#">find us</a></li>
                        </ul> 
                 </li>
            </ul> 
        </div></div> <!--end of navBar-->

        <div id="content"> 
            <div class="contentBox" id="sideBarLeft">
                <div id="miniMenu"> 
                    <ul>
                        <li><a href="ResidentialProperty.html"><nobr>Residential Property</nobr></a></li>
                        <li><a href="CommercialProperty.html"><nobr>Commercial Property</nobr></a></li>
                        <li><a href="CompanyCommercial.html"><nobr>Company Commercial</nobr></a></li>
                        <li><a href="LandlordTenant.html"><nobr>Landlord and Tenant</nobr></a></li>
                        <li><a href="Wills.html"><nobr>Wills</nobr></a></li>
                        <li><a href="TrustandProbate.html"><nobr>Trust and Probate</nobr></a></li>
                        <li><a href="FamilyLaw.html"><nobr>Family Law</nobr></a></li>
                        <li><a href="Employment.html"><nobr>Employment</nobr></a></li>
                        <li><a href="GeneralLitigation.html"><nobr>General Litigation</nobr></a></li>
                        <li><a href="PersonalInjury.html"><nobr>Personal Injury</nobr></a></li>
                    </ul>
                  </div>
                </div> 
            <div class="contentBox" id="galleryBox"> 
            <div id="contentHolder">
            <p id="p1">moving House?</p>

            <p id="p3">At Sinclairs we have over<br/>25 years experience,<br/>helping our clients<br/>through the moving process,<br/>advising on how to stay<br/>in control of their rented<br/>properties,and in all areas<br/>of legal documentation.</p> 
            <p id="p4">renting?</p>


            <p id="p7">need to make a Will?</p>



              <p id="contact">0208 203 3344 <br/>info@sinclairssolicitors.com<button class="myButton" email><a href="#">email us</a></button><br/>20 Watford Way, Hendon, NW4 3AD</p>



            <div>


            </div> 
            <div class="contentBox" id="galleryBox2">
                <!--<img id="image1" src="images/civillitigation2.jpg"class="top"/>-->
                            </div>
            <div class="contentBox" id="galleryBox3"><p></p><img src="images/speechbubble.png"><span>read what our clients have to say about us</span><div id="testimonialTeaser"></div></div>
        </div>   
</div>
</div>
</div> <!--container end-->
<div id="footertop"></div>
<div id="footer"></div>
</body>
</html>
JavaScript文件

// JavaScript Document


$(document).ready(function() {
    var teamMenuHeading = $('#teamMenuHeading');
    var teamSubMenu = $('#teamMenuHeading li');
    var teamSubMenuLinks = $('#teamMenuHeading a');
    var buttonb = ['images/buttonb.gif'];
    //alert (teamSubMenu.length)
teamMenuHeading.hover(
            function(){
                teamSubMenu.stop(true,true).slideDown(700, 'easeOutSine' //, function() {

                                    )
                }, //end teamMenuHeading hover first function

            function(){
                teamSubMenu
                        .stop(true,true).slideUp(200, 'easeOutSine'//, function() {

                )



            }); //end teamMenuHeading hover


    var servicesMenuHeading = $('#servicesMenuHeading')
    var servicesSubMenu = $('#servicesMenuHeading li');
    var servicesSubMenuLinks = $('#servicesMenuHeading a');
//alert (servicesSubMenu.length)
servicesMenuHeading.hover(
            function(){
                    servicesSubMenu.stop(true,true).slideDown(700, 'easeOutSine' //, function() {

                                    )
                }, //end teamMenuHeading hover first function

            function(){
                servicesSubMenu
                        .stop(true,true).slideUp(200, 'easeOutSine'//, function() {

                )



            }); //end servicesMenuHeading hover


    var contactMenuHeading = $('#contactMenuHeading')
    var contactSubMenu = $('#contactMenuHeading li');
    var contactSubMenuLinks = $('#contactMenuHeading a');
//alert (servicesSubMenu.length)
contactMenuHeading.hover(
            function(){
                    contactSubMenu.stop(true,true).slideDown(700, 'easeOutSine' //, function() {

                                    )
                }, //end teamMenuHeading hover first function

            function(){
                contactSubMenu
                        .stop(true,true).slideUp(500, 'easeOutSine'//, function() {

                )



            }); //end contactMenuHeading hover

}); //end ready

样式列表的第一条规则:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href="css/navcss.css" rel="stylesheet" type="text/css"/>
<link href="css/csstest2.css" rel="stylesheet" type="text/css">


<script src="JavaScript/jq.js" type="text/javascript"></script>
<script src="JavaScript/easing.js" type="text/javascript"></script>
<script src="JavaScript/color.js" type="text/javascript"></script>
<script src="JavaScript/navjs.js" type="text/javascript"></script>
<script src="JavaScript/mainTest2.js" type="text/javascript"></script>

</head>

<body>

<div id="container"> 

        <div id="header">
                <img src="images/Logos/logo.png" id="logo" alt="Sinclairs Solicitors Logo"/>
                <img src="images/Logos/conveyancingqualitylogo.gif" id="conveyancingQuality" alt="Conveyancing Quality"/>
        <div id="motto">
                        <p>

                            <span id="motto1">Professional</span>
                            <span id="motto2">Experienced</span>
                            <span id="motto3">Approachable</span>

                        </p>
                            </div>
        </div>

        <div id="nav"><div id="navBar"> 
            <ul> 
                <li id="aboutUsHeading"class="menuItem"><a href="#">about Us</a></li>

                <li id="teamMenuHeading" class="menuItem">
                    <a href="#">the team</a>
                        <ul>
                            <li class="subMenuItem"><a href="#">Henry Drucker</a></li>                                
                            <li class="subMenuItem"><a href="#">Joanna Yianni</a></li>
                        </ul>
                </li>

                <li id="servicesMenuHeading" class="menuItem">
                    <a href="#">services</a>
                         <ul>
                            <li class="subMenuItem"><a href="#">Residential Property</a></li>                            
                            <li class="subMenuItem"><a href="#">Commercial Property</a></li>
                            <li class="subMenuItem"><a href="#">Company Commercial</a></li>
                            <li class="subMenuItem"><a href="#">Landlord and Tenant</a></li>
                            <li class="subMenuItem"><a href="#">Wills</a></li>
                            <li class="subMenuItem"><a href="#">Trust and Probate</a></li>
                            <li class="subMenuItem"><a href="#">Family Life</a></li>
                            <li class="subMenuItem"><a href="#">Employment</a></li>
                            <li class="subMenuItem"><a href="#">General Litigation</a></li>
                            <li class="subMenuItem"><a href="#">Personal Injury</a></li>
                        </ul>
                </li>

                <li id="contactMenuHeading" class="menuItem"><a href="#">contact us</a>
                        <ul>
                            <li class="subMenuItem"> <a href="#">find us</a></li>
                        </ul> 
                 </li>
            </ul> 
        </div></div> <!--end of navBar-->

        <div id="content"> 
            <div class="contentBox" id="sideBarLeft">
                <div id="miniMenu"> 
                    <ul>
                        <li><a href="ResidentialProperty.html"><nobr>Residential Property</nobr></a></li>
                        <li><a href="CommercialProperty.html"><nobr>Commercial Property</nobr></a></li>
                        <li><a href="CompanyCommercial.html"><nobr>Company Commercial</nobr></a></li>
                        <li><a href="LandlordTenant.html"><nobr>Landlord and Tenant</nobr></a></li>
                        <li><a href="Wills.html"><nobr>Wills</nobr></a></li>
                        <li><a href="TrustandProbate.html"><nobr>Trust and Probate</nobr></a></li>
                        <li><a href="FamilyLaw.html"><nobr>Family Law</nobr></a></li>
                        <li><a href="Employment.html"><nobr>Employment</nobr></a></li>
                        <li><a href="GeneralLitigation.html"><nobr>General Litigation</nobr></a></li>
                        <li><a href="PersonalInjury.html"><nobr>Personal Injury</nobr></a></li>
                    </ul>
                  </div>
                </div> 
            <div class="contentBox" id="galleryBox"> 
            <div id="contentHolder">
            <p id="p1">moving House?</p>

            <p id="p3">At Sinclairs we have over<br/>25 years experience,<br/>helping our clients<br/>through the moving process,<br/>advising on how to stay<br/>in control of their rented<br/>properties,and in all areas<br/>of legal documentation.</p> 
            <p id="p4">renting?</p>


            <p id="p7">need to make a Will?</p>



              <p id="contact">0208 203 3344 <br/>info@sinclairssolicitors.com<button class="myButton" email><a href="#">email us</a></button><br/>20 Watford Way, Hendon, NW4 3AD</p>



            <div>


            </div> 
            <div class="contentBox" id="galleryBox2">
                <!--<img id="image1" src="images/civillitigation2.jpg"class="top"/>-->
                            </div>
            <div class="contentBox" id="galleryBox3"><p></p><img src="images/speechbubble.png"><span>read what our clients have to say about us</span><div id="testimonialTeaser"></div></div>
        </div>   
</div>
</div>
</div> <!--container end-->
<div id="footertop"></div>
<div id="footer"></div>
</body>
</html>
重置列表:
ul,li{margin:0;padding:0}

除了
显示:
位置:
浮动:
之外,不要设置
LI
s的样式

使用
display:block
并在
A
-标签上放置所有样式

这将清除99%的列表布局问题


请参阅我的教程:

您应该首先在中验证页面,但您忘记了Chrome 17.0.963.56上的URLLooks buggy中的
.com
。该菜单显示在
galleryBox
的后面。感谢您提供此信息。你认为这会导致奇怪的悬停行为吗?