Question

我希望你们中的一个好人可以提供帮助。我有一个纯CSS下拉菜单，作为设计的一部分，它需要稍微远离主菜单项，问题是因为这个设计有一个差距 - 所以一旦鼠标离开子菜单它消失了。我希望它能保持一段时间，以便用户有更多机会点击。有人可以帮忙吗？

我已经设置了JS fiddle here。

<div id="menu" class="top">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">portfolio</a>
<ul>
<li><a href="#">Overview</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
</li>
    </div>

#menu{
position:absolute;
left:0;
zoom:1;
background-color:#010;
}
#menu ul{
position:relative;
border-top: dotted 1px #fff;
border-bottom: dotted 1px #fff;
padding:2px 0 2px 0;
float:right;
zoom:1;
list-style:none;
}
#menu ul li{
margin:0;
font:16px/16px 'Open Sans', sans-serif;
padding:0 5px 0 0;
display:inline;
position:relative;
zoom:1;
}
#menu ul li a{
color:#fff;
text-decoration:none;
}
#menu ul li a:hover{
text-decoration:underline;
}
#menu ul li.selected a{
    color:#8dc63e;
}
#menu ul li ul {
  border: 2px solid #fff;
  border-radius:10px;
  background-color: #8dc63e;
  padding: 0;
  position: absolute;
  top: 45px;
  right: -30px;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.8s;
  -moz-transition: opacity 0.8s;
  -ms-transition: opacity 0.8s;
  -o-transition: opacity 0.8s;
  -transition: opacity 0.8s;
}
#menu ul li ul li {   
  display: block;
  border-bottom: 1px solid #fff; 
  color: #fff;
  padding:10px;
}
#menu ul li ul li:hover { text-decoration:underline; }
#menu ul li.selected ul li a { color: #fff;}

#menu ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
  z-index:250;
}
#menu ul li ul:after{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #fff transparent;
display: block;
width: 0;
z-index: 1;
top: -15px;
left: 64px; 
}

Answer 1

看起来有点混乱，显示器上有很多重复：没有设置和不透明度：0和可见性：隐藏。那里也有一些z索引。不太好维护。

你真正需要的是UL菜单是不透明度0，随着时间的推移过渡到淡入淡出，但不是太快，然后将悬停状态变为不透明度1。

所以摆弄你的小提琴......

#menu ul li ul {
  border: 2px solid #fff;
  border-radius:10px;
  background-color: #8dc63e;
  padding: 0;
  position: absolute;
  top: 45px;
  right: -30px;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  opacity: 0;
  -webkit-transiton: opacity 8s;
  -moz-transition: opacity 8s;
  -ms-transition: opacity 8s;
  -o-transition: opacity 8s;
  -transition: opacity 8s;
}

和

#menu ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
  z-index:250;
}

这个有效，http://jsfiddle.net/ydF3B/1/虽然我将转换设置为0.8s的8s ...你可能想要挖掘并删除所有不必要的样式，看看实际发生了什么。

玩得开心：）

编辑完全证明我之前关于想要深入研究的评论，上面的小提琴并没有像评论中指出的那样解决你的问题:)相反，更好的方法是制作您正在将鼠标悬停在较大的区域，这样当您从菜单项目转移到菜单上时，即使存在视觉差距，也没有实际差距。我这样做是通过增加填充：http://jsfiddle.net/ydF3B/2/

CSS下拉菜单 - 鼠标移出时消失得太快

1 个答案: