帶有邊距/箭頭的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);
}

將其更改為padding而不是margin可以...但是它打破了陰影。

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/

我像您說的那樣將其更改為padding，但將框陰影添加到了另一個偽元素中。 如果您添加更多子菜單項，則看起來可能很脆弱，但您應該可以調整高度使其看起來正確。

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;
}