html - 是否可以通过将鼠标悬停在同级元素上来打开下拉菜单？

Question

我必须对公司网站的菜单进行一些更改，包括下拉菜单。问题是，我们的网站是用 Prestashop 制作的，这有点搞乱了 HTML 的层次结构。它看起来像这样:

<ul class ="menu">
    <li>
        <a href="" class="sf-with-menu">
        <ul class ="submenu">
            <li>
                <a href="">
            </li>
            <li>
                <a href="">
            </li>
        </ul>
    </li>
</ul>

当我将鼠标悬停在 .sf-with-menu 上时，我想打开类 .submenu 的 ul，它们都是在页面层次结构中处于同一级别。只有 CSS 才有可​​能吗？关于 HTML，我对 Prestashop 的了解非常有限，因为我读过更改 HTML 基本上会在我们更新模块时破坏所有内容，所以我想尽可能坚持使用 CSS。

Answer 1

我想你可以使用 +选择器，它选择“紧跟第一个指定元素之后(而不是内部)放置的元素”，如下所示:

<ul class ="menu">
    <li>
        <a href="" class="sf-with-menu">Anchor</a>
        <ul class ="submenu">
            <li>
                <a href="">One
            </li>
            <li>
                <a href="">Two
            </li>
        </ul>
    </li>
</ul>


<style>
  .submenu {
    display: none;
  }
  .sf-with-menu:hover + .submenu {
    display: initial;
  }
</style>

当鼠标悬停在 .sf-with-menu< 上时，这会将样式应用于紧跟在 .sf-with-menu 之后的每个 .submenu 实例.

它只会突出显示第一个实例，正如您在此 demo 中看到的那样，所以如果你有结构:

.menu
    li
     .sf-with-menu
     .submenu
         // stuff in menu
     .submenu
         // stuff in menu

...然后悬停时只会打开第一个子菜单。

参见 here了解更多 CSS 信息。