Question

好的，我已经尝试了许多解决方案，包括使用jquery，csshover3.htc，直接javascript插入悬停类，为我的下拉列表添加特定宽度，在我的ul和li周围添加边框以强制hasLayout。我有this menu here：除了IE之外，它在一切都很美妙。 IE8和IE9，它的工作时间大约是一半。 IE7，不是那么多（如果你用下拉鼠标继续留在li上，它有时会起作用）。这是我的CSS：

nav {
display:inline;
position:relative;
left:200px;
z-index:10;
}


nav li{ float:left;}    
nav li a{
display:block;
background:#0099ff;
margin:1px;
padding:4px;
color:#000066;
border:1px solid #0099FF;
border-radius:5px 5px 0px 0px;
position:relative;
behavior:url(http://rentcondos4less.cloudmedia.biz/app/webroot/js/PIE.htc);
text-shadow:1px 1px 2px rgba(255,255,255,1);
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
 -webkit-box-shadow:1px -1px 1px 0px rgba(0,0,102,0.5);
 -moz-box-shadow:1px -1px 1px 0px rgba(0,0,102,0.5);
 box-shadow:1px -1px 1px 0px rgba(0,0,102,0.5);

}



nav li a:hover {
color:#00FFFF;
text-shadow:1px 1px 1px rgba(0,153,255,1);
background-image:linear-gradient(#66CCFF 0%, #0099FF 100%);
background-image:-o-linear-gradient(#66CCFF 0%, #0099FF 100%);
background-image:-moz-linear-gradient(#66CCFF 0%, #0099FF 100%);
background-image:-webkit-linear-gradient(#66CCFF 0%, #0099FF 100%);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#0099FF),    to(#66CCFF));
filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#66CCFF', endColorstr='#0099FF')";
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#66CCFF', endColorstr='#0099FF')";
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;

}



nav li ul {
display:none;
width:200px;
}

nav li:hover ul, nav li.hover ul{
display:block;
position:absolute;
z-index:1000;

}

nav li:hover li, nav li.hover li {
float:none;
display:block;
text-align:left;
}

nav li:hover li a {
margin:0;
border-radius:0px;
behavior: url(http://rentcondos4less.cloudmedia.biz/app/webroot/js/PIE.htc);
position:relative;
 box-shadow:none;
 border-bottom:1px dashed #000066;

}

在css文件中，边距和填充已重置为0。我需要将菜单均匀分开，而不仅仅是水平居中，如果我让下拉菜单根据孩子最大的宽度选择宽度，那么下拉菜单确实看起来更好。那么，我做错了什么？

Answer 1

IE7中有一个边距会导致您将鼠标移出锚点，从而关闭菜单。

尝试使用http://cherne.net/brian/resources/jquery.hoverIntent.html

我在http://thecl.com遇到了这个问题，这是一个很好的解决方案。

IE中的CSS下拉问题

1 个答案: