CSS /菜单：如何在元素下方/旁边放置元素

Question

假设我将标记设置为

http://jsfiddle.net/ADxne/

目前的下降看起来像

要解决第一个问题，我可以为子ul添加margin-top以补偿列表项中的填充http://jsfiddle.net/ADxne/1/

.horMenu > li > ul {
    margin-top: 10px;  
}

但是对于没有固定宽度列表或列表项的第二个问题，有没有办法将子菜单放在列表项的右侧？或者是设置固定宽度的唯一方法？ http://jsfiddle.net/ADxne/2/

Answer 1

您可以使用.horMenu ul ul的绝对定位，然后将其移至右侧。还要添加固定宽度。因此，如上所述，.horMenu ul ul将被修改为以下内容：

.horMenu ul ul {
    left: 80px;
    position: absolute;
    top: 0;
    width: 80px;
}

查看实时示例：http://jsfiddle.net/ADxne/3/