CSS下拉/菜单保证金底部

Question

我有一个简单的下拉菜单的CSS，其定位在页脚和与向上的方向 - 小提琴：http://jsfiddle.net/RmTpc/11/

我想为打开的菜单中有一些底（“物品”）的保证金，但是当我将margin-bottom: 30px应用于ul.dropdown ul时，打开的悬停菜单消失。

我GOOGLE也从计算器试图回答：

Drop down menu with margin-top

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

，但不能让它开始工作。任何帮助appriciated，谢谢:)

编辑：抱歉，发布错误的小提琴之前，更新上面的链接。

Answer 1

问题在于保证金 - 它实际上是“死亡空间”，所以当您向上移动鼠标时，实际上并没有触及它。

我认为最好的办法是去除余量，以及30像素添加到ul的底部填充（所以你触摸它，当你将鼠标放置），并去除背景色：

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

（请参阅http://jsfiddle.net/RmTpc/3/）

您可能需要调整列表项的填充以弥补丢失的背景空间，但此解决方案应该适合您。

编辑：

使用更新的jsfiddle，你需要将自己的边界移动到“礼”元素。见New JSFiddle I set up，或此代码：

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

将margin-bottom: 30px置于ul.dropdown ul li块中，而不是ul.dropdown ul。我认为这会使它工作。

Answer 3

看一看下面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; 
} 

你的菜单看起来像你这样做的远了。一个区别是我用padding替换margin。

更新：我已经更新了CSS代码