CSS下拉导航/箭头

Question

我想，当有人鼠标经过一个下拉菜单项添加一个顶部箭头。

的问题是，如果我加入一些保证金下拉框 - 所以从上面得到的距离，并能得到箭头 - 当您尝试鼠标消失下拉事情。因为有空的空间。

下面是我所说的： http://jsfiddle.net/jFWGS/

“问题”开始于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; 
}