为什么这个菜单在IE中表现得很古怪?SOS
Why does this menu act screwy in IE? SOS
我希望有人能帮忙。这把我逼疯了。
你可以在www.jomundayphotography.com/template.html上看到我遇到问题的页面。
除了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>
CSS
@charset "utf-8";
/* CSS Document */
@charset "utf-8";
/* CSS Document */
@charset "utf-8";
/* CSS Document */
/* reset */
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* @font-face @/ /* Generated by Font Squirrel (http://www.fontsquirrel.com) on May 2, 2011 04:30:37 PM America/New_York */
/* end reset*/
body {
position:relative;
background: url(../images/Backgrounds/bgtile1.gif);
z-index: -30;
overflow: scroll;
}
#container {
position:relative;
top: 0px;
width: 1002px;
height:850px;
margin: 20px auto 0px auto;
background-color: #fff;
/*border-right: 15px #18c662 solid;*/
}
#header {
position:relative;
display: block;
clear: both;
z-index:10;
margin: 0px;
height: 170px;
background-image: url(../images/Backgrounds/headerbg.gif);
background-repeat:repeat-x;
}
#logo {
clear:both;
padding-top: 20px;
padding-bottom:15px;
padding-left: 30px;
float:left;
height: 140px;
background: none;
}
#conveyancingQuality {
float:right;
height: 95px;
padding-top: 10px;
}
#motto {
clear:both;
position: absolute;
line-height:.9;
left: 470px;
top: 30px;
color: #000;
width: 200px;
font-size: 1.8em;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
margin: 0px;
font-family: 'Ropa Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
font-style: italic;
line-height: 1.3;
}
#motto1 {
display: none;
}
#motto2 {
display: none;
margin-left: 40px;
}
#motto3 {
display: none;
margin-left: 70px;
}
#navBar {
clear:both;
width: 100%;
margin: 0 auto;
}
#navBar a {
display: block;
width: 238.5px;
height: 18px;
/*margin-right: 16.25px;
margin-left: 16.25px;*/
padding: 6px;
border-right:0px #fff solid;
text-decoration:none;
background: url(../images/Buttons/buttona.png);
height: 50px;
background-repeat:no-repeat;
color: #000;
font-family: 'Ropa Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size:1.8em;
}
#aboutUsHeading a {
/*margin-left: 30.25px;*/
}
#contactMenuHeading a{
/*margin-right: 0px;*/
border-right:0px #fff solid;
}
#navBar a:hover {
color: #039;
color: rgba(21, 68, 86, .9);
background: url(../images/Buttons/buttonb.png);
background-repeat: repeat-x;
}
#navBar li.menuItem {
/*z-index:21;*/
margin-top:-6px;
text-align:center;
margin-right:0px;
float:left;
line-height: 1.6;
font-size:100%;
height: 30px;
border-right:0px #fff solid;
}
.subMenuItem {
position:relative;
top: 0px;
display: none;
font-size:80%;
text-indent: 15px;
text-align: left;
border-right:0px #fff solid;
height: 50px;
z-index:30;
}
#navBar ul ul li a {
height:30px;
background: url(../images/Buttons/submenubuttona.png);
background-repeat: no-repeat;
font-size: 95%;
}
#navBar ul ul li a:hover {
background: url(../images/Buttons/submenubuttonb.png)
}
#content {
clear: both;
z-index: 22;
position: absolute;
top: 235px;
}
.contentBox {
position: absolute;
float:left;
border: 1px #154456 solid;
margin: 0px;
height: 600px;
/*background-image: url(../images/Backgrounds/contentbg2.png);
background-repeat: repeat-x;
/*-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;*/
}
#sideBarLeft {
position:relative;
width: 1000px;
}
#miniMenu {
padding: 5px 0px;
margin: 210px 0px 5px 13px;
font-family: 'Ropa Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
background: none;
width: 200px;
-webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .7);
-moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .7);
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .7);
}
#miniMenu a {
display:block;
text-decoration:none;
font-size:110%;
height: ;
padding: 3px 3px 3px 10px;
margin-top: 0px;
margin-bottom: 3px;
width:90%;
background-image: url(../images/Buttons/submenubuttona.png);
background-repeat:no-repeat;
color: #000;
font-family: 'Ropa Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
text-indent:0px;
}
#miniMenu a:hover {
text-decoration:none;
color: rgba(21, 68, 86, .9);
background-image: url(../images/Buttons/submenubuttonb.png);
font-style:italic;
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .7);
-moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .7);
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .7);
}
#articleBox {
left: 210px;
width: 580px;
}
#sideBarRight {
left: 799px;
width: 200px;
}
.contentBox, #container, #content {
-webkit-box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, .7);
-moz-box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, .7);
box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, .7);
}
#galleryBox {
positioning: absolute;
top: 13px;
left: 10px;
height: 170px;
width: 980px;
background: url(../images/Backgrounds/dep_5272790-London-Skyline.png);
}
#contentHolder{
width: 550px;
height:100%;
background:#fff;
margin-left:250px;
z-index: 10
}
#contentHolder p {
padding: 0;
z-index: 11;
padding-top: 10px;
}
#p1 {
display: none;
font-family: 'Droid Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 80%;
color: #154456;
margin-left: 470px;
}
#p3 {
position: absolute;
top: 0px;
display: none;
margin-left: 320px;
font-family: 'Droid Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 100%;
text-align:center;
color: #154456;
}
#p4 {
display: none;
font-family: 'Droid Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 80%;
color: #154456;
margin-left: 470px;
}
#p7 {
display: none;
font-family: 'Droid Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 80%;
color: #154456;
margin-left: 470px;
}
#contact {
display: none;
font-family: 'Droid Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 200%;
color: #154456;
margin-left: 0px;
}
#contact a{
color: #154456;
text-decoration:none;
}
#contact a:hover{
text-decoration: underline;
}
#contactBox {
display: block;
width: 200px;
height: 100px;
position:absolute;
top: 76px;
background: #3F3
}
.myButton {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #154456) );
background:-moz-linear-gradient( center top, #ededed 5%, #154456 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#154456');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #154456;
display:inline-block;
color:#f5f5f5;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
}.myButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #154456), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #154456 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#154456', endColorstr='#ededed');
background-color:#154456;
}.myButton:active {
position:relative;
top:1px;
}
#galleryBox2 img {;
position:absolute;
width: 100%;
height:100%;
margin: 0 auto;
}
#image2 {
display: block;
}
#image1 {
display: block;
}
#galleryBox2 img:hover {
}
#galleryBox2 {
positioning: absolute;
top: 190px;
left: 215px;
height: 375px;
width: 210px;
background-image: url(../images/Backgrounds/contentbg2.png);
}
#galleryBox3 {
positioning: absolute;
top: 190px;
left: 440px;
height: 375px;
width: 538px;
background-image: url(../images/Backgrounds/contentbg2.png);
}
#testimonialTeaser {
position: relative;
top: 12px;
background:none;
/*background: #18c662;*/
width: ;
height: 100px;
margin: 0 auto;
}
#footertop {
margin: 40px 0px 0px 0px;
background: url(../images/Backgrounds/footerbg.png);
background-repeat: repeat-x;
position:relative;
top:0px;
height:75px;
}
#footer {
background:#FFFFFF;
position:relative;
top:75px;
height:auto;
}
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
样式列表的第一条规则：
重置您的列表：ul, li { margin:0;padding:0 }
除了display:、position:和float:之外，不要设置LI的样式。
使用display:block并将所有样式放在A-标签上。
这将清除99%的列表布局问题。
请参阅我的教程：http://preview.moveable.com/JM/ilovelists/
相关文章：
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- Jquery菜单操作不稳定，定位不正确，存在一般错误
- angular的下拉菜单
- 使用JQuery的动态上下文菜单
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- 创建下拉菜单
- 下拉菜单在菜单按钮的边缘闪闪发光
- Div根据<选择>菜单
- I'我设计了一个下拉菜单，onclick会出现，而on blur会消失
- 硒IDE下拉菜单
- 将JavaScript弹出菜单转换为警报框
- 调整屏幕大小后不显示子菜单
- 固定位置菜单时滚动，直到它击中一个相对容器的底部
- 我的下拉菜单中的链接不起作用
- Bootstrap Dropdown selection是在*all*下拉菜单上设置选择
- Jquerymobile-使用javascript创建选择菜单
- 如何将JSON转换为HTML下拉菜单
- 滚动后保持固定的菜单栏不起作用
- 如何关闭所有其他子菜单
- 为什么这个菜单在IE中表现得很古怪?SOS
