我用 CSS 创建了一个下拉菜单,它在 Firefox、Chrome 和 IE8 中运行良好,但在 IE8 兼容模式下会失败。当您尝试将鼠标悬停在下拉菜单上时,它会消失。您可以在以下位置查看此问题:http://chocolat.digitaldementia.ca/chocolat .在过去的 4 天里,我一直在努力寻找解决此问题的方法,但到目前为止都没有成功。
CSS 代码如下所示:
#nav {
padding: 0;
margin: 0;
list-style: none;
height: 41px;
/*background: url(images/menuitembackground.jpg) repeat-x;*/
position: relative;
z-index: 500;
font-family: arial, verdana, sans-serif;
}
#nav li.top {
display: block;
float: left;
height: 41px;
}
#nav li a.top_link {
display: block;
float: left;
height: 40px;
line-height: 34px;
color: #ffe09a;
text-decoration: none;
font-size: 13px;
font-weight: bold;
padding: 0 0 0 15px;
cursor: pointer;
/*background: url(images/menuitembackground.png) no-repeat;*/
}
#nav li a.top_link span {
float: left;
display: block;
padding: 0 24px 0 12px;
height: 40px;
/*background: url(three_0.gif) right top no-repeat;*/
}
#nav li a.top_link span.down {
float: left;
display: block;
padding: 0 24px 0 12px;
height: 40px;
/* background: url(images/menuitembackground.png) no-repeat right top;*/
}
#nav li:hover a.top_link {
color: #fff;
background: url(images/menuitembackground.png) no-repeat left top;
}
#nav li:hover a.top_link span {
background: url(images/menuitembackgroundright.png) no-repeat right top;
}
#nav li:hover a.top_link span.down {
background: url(images/menuitembackgroundright.png) no-repeat right top;
}
/* Default list styling */
#nav li:hover {
position: relative;
z-index: 200;
}
#nav li:hover ul.sub {
left: 1px;
top: 40px;
background: #f5d585;
padding: 3px;
border: 1px solid #dfbc6b;
white-space: nowrap;
width: 140px;
height: auto;
z-index: 300;
-moz-box-shadow: 5px 5px 7px #663725;
-webkit-box-shadow: 10px 10px 5px #663725;
box-shadow: 10px 10px 5px #663725;
}
#nav li:hover ul.sub li {
display: block;
height: 20px;
position: relative;
margin: 0;
padding: 0;
float: left;
width: 100%;
font-weight: normal;
}
#nav li:hover ul.sub li a {
display: block;
padding: 0px 5px 0px 5px;
font-size: 11px;
height: 18px;
width: auto;
line-height: 18px;
text-align: left;
/*text-indent: 5px;*/
color: #723f2e;
text-decoration: none;
}
#nav li ul.sub li a.fly {
background: #bbd37e url(arrow.gif) 80px 6px no-repeat;
}
#nav li:hover ul.sub li a:hover {
background: #c89948;
color: #fff;
}
#nav li:hover ul.sub li a.fly:hover {
background: #6a812c url(arrow_over.gif) 80px 6px no-repeat;
color: #fff;
}
#nav li:hover li:hover ul, #nav li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover li:hover ul {
left: 90px;
top: -4px;
background: #bbd37e;
padding: 3px;
border: 1px solid #5c731e;
white-space: nowrap;
width: auto;
z-index: 400;
height: auto;
}
#nav ul, #nav li:hover ul ul, #nav li:hover li:hover ul ul, #nav li:hover li:hover li:hover ul ul, #nav li:hover li:hover li:hover li:hover ul ul {
position: absolute;
left: -9999px;
top: -9999px;
width: 0;
height: 0;
margin: 0;
padding: 0;
list-style: none;
}
#nav li:hover li:hover a.fly, #nav li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover li:hover a.fly {
background: #6a812c url(arrow_over.gif) 80px 6px no-repeat;
color: #fff;
border-color: #fff;
}
#nav li:hover li:hover li a.fly, #nav li:hover li:hover li:hover li a.fly, #nav li:hover li:hover li:hover li:hover li a.fly {
background: #bbd37e url(arrow.gif) 80px 6px no-repeat;
color: #000;
border-color: #bbd37e;
}
HTML 是典型的列表结构:
<div id="menucontainer">
<div id="menuList">
<ul id="nav">
<li class="top"> <a href="#" class="top_link"><span class="down">Welcome</span></a>
</li>
<li class="top"> <a href="#" id="products" class="top_link"><span class="down">Treats</span></a>
<ul class="sub">
<li> <a href="#">Chocolates</a>
</li>
<li> <a href="#">Coffees</a>
</li>
<li> <a href="#">Baked Goods</a>
</li>
<li> <a href="#">Gelato</a>
</li>
<li> <a href="#">Light Menu Items</a>
</li>
</ul>
</li>
<li class="top"> <a href="#" id="locations" class="top_link"><span class="down">Locations</span></a>
<ul class="sub">
<li> <a href="#">3rd Avenue Cafe</a>
</li>
<li> <a href="#">Massey Drive Cafe</a>
</li>
<li> <a href="#">Mobile Cafe</a>
</li>
</ul>
</li>
<li class="top"> <a href="#" class="top_link"><span class="down">About</span></a>
</li>
<li class="top"> <a href="#" class="top_link"><span class="down">Contact</span></a>
</li>
</ul>
</div>
</div>
最佳答案
li:hover
在IE下无法使用 有几种解决方法,google一下!
http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=LI+Hover+IE
关于html - 在兼容模式下尝试将鼠标悬停在 IE 8 上时 CSS 菜单消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3535902/