Css drop-down menu with lower margin

advertisements

I've got a simple dropdown css menu, which is positioned in the footer and with upwards direction - fiddle: http://jsfiddle.net/RmTpc/11/

i would like for opened menu to have some bottom margin from the main li ("Items"), but when i apply margin-bottom: 30px to the ul.dropdown ul, opened menu dissapears on hover.

I've googled and also tried answers from stackoverflow:

Drop down menu with margin-top

How to use (top) margin with CSS3 drop down menu?

but can't get it to work. Any help appriciated, thanks :)

EDIT: Sorry, posted wrong fiddle before, updated the link above.


The problem lies with the margin - it's effectively 'dead space' so you're not actually touching it when you move the mouse up towards it.

I think the best solution is to remove the margin, and add the 30px to the bottom padding of the ul (so you're touching it when you mouseover), and remove the background color:

ul.dropdown ul {
    left: 0;
    position: absolute;
    top: 100%;
    visibility: hidden;
    z-index: 999;
    margin: 0;
    width: 300px;
    padding: 20px 20px 50px;
    opacity: 0;
    -ms-filter: "alpha(opacity=0)";
    filter: alpha(opacity=0);
}

(see http://jsfiddle.net/RmTpc/3/)

You'll probably need to adjust the padding of the list items to make up for the lost background space, but this solution should work for you.

EDIT:

Using the updated JSFiddle, you'll need to move your borders to the 'li' elements as well. See the New JSFiddle I set up, or this code:

ul.dropdown ul {
    left: 0;
    position: absolute;
    top: 100%;
    visibility: hidden;
    z-index: 999;
    margin: 0;
    width: 300px;
    padding: 20px 20px 50px;
    opacity: 0;
    -ms-filter: "alpha(opacity=0)";
    filter: alpha(opacity=0);
}
ul.dropdown ul li {
    float: none;
    background: #fff;
    border: solid 2px #bbb;
    border-top: none;
    border-bottom: none;
}
ul.dropdown ul li:first-child {
    border-top: 2px solid #bbb;
}
ul.dropdown ul li:last-child {
    border-bottom: 2px solid #bbb;
}