Выравнивание элементов списка детей по родительскому элементу в выпадающем меню

Question

Я пытаюсь создать выпадающее меню, подобное этому сайту .

Как мне:

1. Выровнять дочерние элементы списка под главным элементом списка навигации?
2. Показать все дочерние элементы списка независимо от того, над каким элементом основного навигационного списка находится курсор?

Ниже приведены некоторые фрагменты кода. См. 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