HTML列表/菜单 - 宽度可以自动更改吗？ （用于悬停/滑行）

Question

我正在使用带有各种子菜单的垂直下拉菜单的html列表。每个导航点都是无序列表中的列表项。

每个子导航元素都位于另一个列表中的后续列表中，这些列表最初是隐藏的。

当顶部元素悬停时，列表会向下滑动。问题是顶部项目占据了最宽项目的整个宽度，因此当鼠标实际位于文本之外时它会“触发”。

我尝试使用范围更具体地定位顶部项目中的文本，但问题是鼠标离开文本后，菜单会在将鼠标悬停在新项目上时向上滑动。

有没有办法让这个顶级导航项目的所有子元素的宽度都不足？

修改

实际上我终于设法解决了 - 问题是我在整个列表上声明了一个宽度，因为没有它，滑动导致菜单在滑落后在底部'跳'，我想文字本身就是“展开”的东西。将宽度应用于子导航项目时，列表不会弹出，“目标”区域也只是顶点。

Answer 1

如果我理解正确，您的导航将如下所示：

<ul>
    <li>Nav Point 1
        <ul>
            <li>navigation item 1</li>
            <li>navigation item 2</li>
            <li>navigation item 3</li>
        </ul>
    </li>
    <li>Nav Point 2
        <ul>
            ....

因为导航项目在导航点的结构内，我认为点的大小将由项目决定，假设它更大。为了实现你想要的，我认为你必须考虑不同的结构。

也许您可以使用两个单独的列表列表？第一个列表是顶级导航点，第二个列表是导航项。您将使用脚本和CSS隐藏第二个列表，并将项目放置在相应的顶级导航下方。您的脚本将在适当的位置显示和隐藏所需的菜单。如果要一次显示多个导航项目（例如，如果菜单在鼠标移出后“逗留”），您的脚本可能需要将导航项列表分成单独的结构。

它并不像典型的“列表列表”结构那么简单，但它也是一个更复杂的显示，因此您需要付出复杂的代价。