如何仅使用 HTML 和 CSS（也许很小的 JavaScript）制作多层下拉菜单

Question

CSS 新手，只能找到单级菜单。这是菜单和列表项：

<ul>
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Forums</a>
        <ul>
            <a href="#">Basketball</a>
            <ul>
                <li>
                    <a href="#">Trading</a>
                </li>
                <li>
                    <a href="#">Personal Collections</a>
                </li>
                <li>
                    <a href="#">Box Breaks</a>
                </li>
            </ul>
        </ul>
    </li>
</ul>

正如您所看到的，它将是多层的。现在，使用我拥有的 CSS，首先仅显示主页和论坛，当我将鼠标悬停在论坛上时，会显示篮球......但后续菜单项也是如此。我希望它们保持隐藏状态，直到我将鼠标悬停在篮球上。有人知道如何仅使用 CSS 或尽可能少的 JavaScript 来做到这一点吗？谢谢。这是我的 CSS 代码：

ul
{
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #ccc;
}

ul li
{
    position: relative;
}

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

ul li a
{
    display: block;
    text-decoration: none;
    color: #777;
    background: #bad8f8;
    padding: 2px 0 2px 10px;
    border: 1px solid #ccc;
    border-bottom: 0;
}

li:hover ul
{
    display: block;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

Answer 1

这是一个工作演示：

http://jsfiddle.net/rcravens/aqz8q/

我做了两件事。

1. 对 ul/li 列表进行了一些重组。有些元素不在 li 中。

   对

2. 使用 'li:hover > ul' 仅选择直接子级。

希望有帮助。

鲍勃

Answer 2

尝试添加

ul li ul{position: absolute; top: 0; left: 0; width: 250px; height: 250px; background-color: #EEE;}

并从那里开始:)

Answer 3

您构建 css 的方式会导致“篮球”的所有后代继承其 css。您应该使用 child(">") 或 :first-child 选择器。请参阅第 5.5 节和第 5.6 节，了解我在说什么：http://www.w3.org/TR/CSS2/selector.html w3.org/TR/CSS2/selector.html

如果您正在寻找动态菜单，我强烈建议您使用 javascript 而不是纯粹依赖 css，除非您确定很多人会访问您的网站他们的 javascript 已关闭。