Question

当有人将鼠标放在下拉菜单项上时，我正在尝试添加顶部箭头。

问题是如果我在下拉框中添加一些边距 - 所以它与顶部的距离可以得到箭头 - 当你试图将鼠标悬停在下拉状态时它会消失。因为有空的空间。

“问题”从第13行开始。

nav ul li ul{
    position:absolute; 
    display:none; 
    width:220px; 
    padding-left:3px;
    margin:0;
    margin-top: 14px;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.439);
}

将其更改为填充，而不是边距有效...但它会打破阴影。

Answer 1

我使用隐藏的:after伪元素，以便让下拉列表正常工作

nav ul li ul:after {
    top: -15px;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    height:20px;
    width: 100%;
}

jsFiddle

Answer 2

检查出来：http://jsfiddle.net/jFWGS/10/

我把它改成了填充，就像你说的那样，但是将盒子阴影添加到另一个伪元素中。如果您添加更多子菜单项似乎可能很脆弱，但您应该能够调整高度以使其看起来正确。

nav ul li ul{
position:absolute; 
display:none; 
width:220px; 
padding-left:3px;
margin:0;
padding-top: 14px;
}
nav ul li ul:before{
content: '';
position:absolute;
top:14; left:0;
width:100%;
height: 85%;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.439); 
}
nav ul li ul:after{
border-bottom: 8px solid #fff;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 0px solid #fff;
top: 6px;
content: "";
display: block;
left: 4%;
position: absolute;
width: 0px;
z-index: 1;
}

具有边距/箭头的CSS下拉导航

2 个答案: