html - 重新排列 CSS 下拉菜单

Question

我正在按照教程制作一个 CSS 下拉菜单。但我想知道是否有办法让它出现在左侧，一个按钮在另一个之上，而不是在按钮彼此相邻的顶部。

score 2 · Accepted Answer

2

您将需要删除或更改此 CSS 属性：

nav ul li {
    float: none;
}

于 2012-12-10T16:52:23.907 回答

score 2 · Accepted Answer

如果您使用教程来学习，为什么不按照垂直菜单的教程来学习呢？不仅菜单中项目的定位不同，而且子元素的定位也会有很大不同。如果您正在创建一个像您一样的水平菜单，即使您将元素彼此重叠移动，如果当它们的父元素悬停/单击时它们仍然具有相同的“下拉菜单”，这些子元素也会覆盖其他菜单项.

这是一个垂直菜单教程的例子，但那里有很多。 http://www.devinrolsen.com/pure-css-vertical-menu/

score 0 · Accepted Answer

我根据您提供的链接为垂直菜单制作了一个jsFiddle 。我删除了所有花哨的渐变、填充和圆角，只使用了一点颜色，其余的都是功能性的 CSS。

每个菜单项都可以是具有此 CSS 的子菜单的根：

nav li {
     position: relative;
}
nav ul ul {
     position: absolute;
     top: 0;
     left: 100%;
}

通过这种方式，您可以创建任意深度的菜单。

3 回答 3