Javascript 为什么这个菜单在IE中表现得很糟糕?紧急求救信号
我希望有人能帮忙。这让我快发疯了 您可以在上看到我遇到问题的页面 除了Internet Explorer(所有版本都有问题)外,下拉菜单在任何地方都可用 代码: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?
<!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
的后面。感谢您提供此信息。你认为这会导致奇怪的悬停行为吗?