html - 水平下拉菜单悬停

Question

我厌倦了从 this tuts 构建水平下拉菜单和 demo

我希望菜单看起来像这样:

我想让子菜单出现在右边的父菜单中，http://alistapart.com/article/horizdropdowns#snippet4

下一步是子菜单。我们希望每个子菜单都显示在其父菜单项悬停时的右侧。

li ul {
 position: absolute;
 left: 149px;
 top: 0;
 display: none;
}

但是我的子菜单没有出现在它的父菜单的右边，看起来像:

here jsfiddle

Answer 1

删除 ul 隐藏列表的现有样式并添加以下类:subdrop-list

然后添加这个 CSS:

.subdrop-list {
    display: none;
    position: relative;
}
.subdrop-list ul {
    position: absolute;
    top: 0;
    right: 0;
}

JSFiddle:http://jsfiddle.net/4jVtw/3/