如何显示这样的嵌套列表？

Question

我有列表嵌套在这样的列表中：

<ul>
    <li><a href="#">Rings</a></li>
    <li><a href="#">Bracelets</a></li>
    <li><a href="#">Earrings</a>
        <ul>
            <li><a href="#">Diamond Earrings</a></li>
            <li><a href="#">Hoop Earrings</a></li>
            ...
        </ul>
    </li>
    <li><a href="#">Necklaces and Pendants</a>
    ...
</ul>

列表左侧浮动。嵌套列表默认为不显示。所以最终看起来像这样：

到目前为止，我有。现在我想做的是每当一个列表悬停时有一个嵌套列表（例如 Earrings ）。我希望嵌套列表如下所示：

注意这里发生了什么，它不仅告诉显示嵌套列表，这看起来不正确。它将它们放在它们包装的第一级列表之间的块中（介于“运动首饰”和“魅力”之间。

我不知道该怎么做。

有什么想法吗？

Answer 1

您希望悬停状态更改从display:none到display:block的子列表。

它应该是这样的：

ul li ul { display: none; }
ul li:hover ul { display: block }

当它没有悬停时根本不会显示，并且当你悬停时会在列表项之间添加空格。

您可能还需要进行一些绝对定位，使其显示在悬停项目下方，否则它也会将其旁边的东西推下来。

Answer 2

我认为最简单的方法是为每一行创建不同的列表。如下所示：

<ul>
    <li><a href="#">Rings</a></li>
    <li><a href="#">Bracelets</a></li>
    <li><a href="#">Earrings</a>
        <ul>
            <li><a href="#">Diamond Earrings</a></li>
            <li><a href="#">Hoop Earrings</a></li>
            ...
        </ul>
    </li>
    <li><a href="#">Necklaces and Pendants</a>
    ...
</ul>
<ul><li><a href="#">Charms</a></li>
    <li><a href="#">Mens Jewelry</a></li>
     ....

因此，当您将第一行的li悬停时，内部ul将根据正常流量显示在第二行的上方。

要隐藏内部ul，您可以使用display:none作为初始状态，并使用ul li:hover {display:block; }

显示它