在下拉菜单中将子列表项与父项对齐

Question

我正在尝试构建类似于 this site 的下拉菜单。

我如何：

在主导航列表项下对齐子列表项？
无论悬停在哪个主导航列表项上，都显示所有子列表项？

下面是一些代码片段。完整代码见 codepen。

.nav > li > a {
      position: relative;
      display: block;
      z-index: 510;
      height: 54px;
      padding: 0 50px;
      line-height: 54px;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }

    <nav class="main-nav">
          <ul className="nav">
            <li>
              <a>Products</a>
    
              <div className="subnav-block">
                <ul>
                  <li>
                    <a>Product A</a>
                  </li>
                  <li>
                    <a>Product B</a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>

        </nav>

Answer 1

为了对齐子项，您可以确保子项与父项具有相同的padding/width。

.nav > li > a {
  width: 200px;
  padding: 0 10px;
}

.nav .subnav-block li a {
  margin-left: 10px;
}

要显示悬停的所有子项，只需在父项而不是子项上使用 :hover 即可：

.nav:hover > li > .subnav-block {
  opacity: 1;
  visibility: visible;
  overflow: visible;
}

我又做了一些改动，具体见笔

https://codepen.io/davidtorresdesign/pen/agXGPY

在下拉菜单中将子列表项与父项对齐

Aligning Children List Items to Parent in Dropdown Menu

html

javascript

css

menu

reactjs