CSS drop-down nav with margin/arrow

Question

I am trying to add a top arrow when someone mouses over a drop down menu item.

The problem is if I add some margin to the dropdown box - so it gets distance from the top and can get the arrow - when you try to mouse over the dropdown thing it disappears. because there is empty space.

Here is what I am talking about: http://jsfiddle.net/jFWGS/

The "problem" starts at line 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);
}

Changing it to padding, instead of margin works... but it breaks the shadow.

Answer 1

Check this out: http://jsfiddle.net/jFWGS/10/

I changed it to padding like you said but added the box shadow to another pseudo element instead. It seems like it might be fragile if you add more sub menu items but you should just be able to tweak the height to get it looking right.

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

Answer 2

I'd use a hidden :after pseudo element in order to allow the drop down to work properly as is

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

jsFiddle