Question

我正在使用纯SCSS下拉菜单。我尝试的方法是向悬停的父母展示徘徊的父母的孩子。我正在使用SASS。请参阅下面的我的标记。我在上面评论了重要部分：

HTML：

<nav class="main-navigation">
    <ul>
      <li class="item"><a href="#">item</a></li>
        <li class="subitem">
          <ul>
            <li>subitem</li>
            <li>subitem</li>
            <li>subitem</li>
          </ul>
        </li>
      <li class="item"><a href="#">PLot Overview</a></li>
        <li class="subitem">
          <ul>
            <li>subitem</li>
            <li>subitem</li>
            <li>subitem</li>
          </ul>
        </li>
      <li class="item"><a href="#">subitem</a></li>
      <li class="item"><a href="#">subitem</a></li>
      <li class="item"><a href="#">subitem</a></li>
      <li class="item"><a href="#">subitem</a></li>
      <li class="item"><a href="#">subitem</a></li>
    </ul>
</nav>

SCSS：

.main-navigation {
  width: 100%;
  position: relative;
  ul {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px;
    .item {
      display: inline;
      padding-right: 43px;
      font-size: 13px;
      text-transform: uppercase;
      // this is where the subitem is supposed to show on hover
      &:hover .subitem {
        display: block;
      }
    }
  }
}

.subitem {
   display: none;
}

我正在做（或者至少尝试）用于显示每个悬停的孩子的代码块是：

&:hover .subitem {
   display: block;
}

但我不明白为什么它不起作用。它汇总到这个：

.main-navigation ul .item:hover .subitem {
   display: block;
}

这与the W3Schools example基本相同：

.dropdown:hover .dropdown-content {
    display: block;
}

在w3和我的实现中，父选择器的子节点以及我知道如何在悬停时显示子元素。

以下是我演示的jsfiddle：https://jsfiddle.net/o2fbvqe0/1/

根据我的理解，我应该能够在CSS中显示带有:hover的子元素，但它在此示例中不起作用。那是为什么？

Answer 1

我正在尝试的方法是向徘徊的父母展示孩子

好的，但看看你的标记：

 <li class="item"><a href="#">item</a></li>
 <li class="subitem">

您的子项目不是您的项目的子项（或任何其他类型的后代）。他们是兄弟姐妹。

正确的标记是：

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

<nav>
  <ul>
    <li class="item">
      Section name
      <ul class="submenu">
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
      </ul>
    </li>
    <li class="item">
      Section name
      <ul class="submenu">
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
      </ul>
    </li>
  </ul>
</nav>

危险：此方法存在严重的可访问性问题。不使用指点设备就不可能触发子菜单（这排除了任何依赖于非基于指向的导航形式的人，包括大多数屏幕阅读器用户），并且需要稳定的手来跟踪子菜单下的指针而不会偏离边缘（这不包括行动不便/灵巧性问题的人，例如许多患有关节炎的人）。

重新考虑这种方法并寻找一个系统：

点击基础
有真实的链接转到菜单顶层的有用位置
使用自然交互元素触发子菜单（例如链接或按钮但不包括列表项）

您几乎肯定会想要使用JavaScript，这比尝试使用CSS来满足这些要求要容易得多。

SCSS下拉悬停菜单

1 个答案: