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

要对齐子代，可以确保子代与父代具有相同的填充/宽度。

.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

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

1 个答案: