Css drop down/up menu with margin bottom - html

Question

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.

Answer 1

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

Answer 2

Have a look at following CSS:
http://jsfiddle.net/RmTpc/15/
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
height: 100%;
}
footer {
position: fixed;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background: #222;
z-index: 999;
padding-left: 40px;
}
ul#nav {
font-family: Arial, Helvetica;
font-weight: 300;
}
ul.dropdown, ul.dropdown li {
list-style: none outside none;
margin: 0;
padding: 0;
}
ul.dropdown {
float: left;
position: relative;
z-index: 999;
}
ul.dropdown li {
float: left;
line-height: 1.3em;
min-height: 1px;
vertical-align: middle;
}
ul.dropdown li.hover, ul.dropdown li:hover {
cursor: default;
position: relative;
z-index: 600;
}
ul.dropdown ul {
left: 0;
position: absolute;
top: 100%;
visibility: hidden;
z-index: 999;
margin: 0;
width: 300px;
padding-bottom: 30px;
padding-left: 0;
opacity: 0;
-ms-filter: "alpha(opacity=0)";
filter: alpha(opacity=0);
}
ul.dropdown li:hover > ul {
visibility: visible;
-ms-filter: "alpha(opacity=100)";
filter: alpha(opacity=100);
opacity:1;
zoom: 1;
}
ul.dropdown ul li {
float: none;
background: #fff;
border-left: solid 2px #bbb;
border-right: solid 2px #bbb;
padding-left: 20px;
padding-right: 20px;
}
ul.dropdown ul li:first-child {
border-top: solid 2px #bbb;
padding-top: 20px;
}
ul.dropdown ul li:last-child {
border-bottom: solid 2px #bbb;
padding-bottom: 20px;
}
ul.dropdown ul ul {
left: 99%;
top: 1px;
}
ul.dropdown-upward ul {
bottom: 100%;
top: auto;
}
ul.dropdown li {
color: #fff;
background: #222;
padding: 7px 10px;
}
ul.dropdown li.hover, ul.dropdown li:hover, ul.dropdown li.on {
color: #bbb;
}
ul.dropdown a:link, ul.dropdown a:visited {
color: #000000;
text-decoration: none;
}
ul.dropdown a:hover {
color: #000000;
}
ul.dropdown a:active {
color: #FFA500;
}
ul.dropdown ul li {
font-weight: normal;
}
Your menu will look like you have done it so far. One difference is that I replaced the margin with padding.
UPDATE: I have updated the CSS Code

Answer 3

Put the margin-bottom: 30px in the ul.dropdown ul li block and not for ul.dropdown ul. I think that'll make it work.