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

Question

I'm attempting to build a dropdown menu similar to this site .

How do I:

1. Align the children list items under main nav list item?
2. Display all children list items no matter which main nav list item is hovered over?

Below are some code snippets. See codepen for full code.

 .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

For aligning the children, you can make sure the children have the same padding/width as the parent.

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

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

For showing all of the children on hover, simply use :hover on the parent instead of the child:

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

I did some more changes, see the pen for details.

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