Проблемы с выпадающим меню

Question

Я прошу прощения за то, что это простая проблема, я создал очень простое выпадающее меню, но оно не работает как задумано. Я проверил, существует ли проблема и задавался ли она здесь ранее, были ли похожие проблемы, исправленные с white-space: nowrap;, который я пытался интегрировать, но, к сожалению, это не помогло решить мою проблему. Я надеюсь, что кто-то может указать мне правильное направление с этим! Заранее спасибо.

* {
  padding: 0;
  margin: 0;
}

/*****
MAIN MENU
*****/
.menu ul {
  list-style: none;
  position: absolute;
  margin-top: 10px;
}

.menu ul li {
  display: inline-block;
  float: left;
}

.menu ul li a {
  background: #ccc;
  padding: 10px 20px 10px 20px;
}

/*****
DROPDOWN
*****/
.menu ul li ul {
  display: none;
}

.menu ul li:hover > ul {
  display: inline-block;
  white-space: nowrap;
  
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/*****
ANIMATION KEYFRAMES
*****/
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
      <ul>
        <li><a href="#">Team</a></li>
        <li><a href="#">Roadmap</a></li>
      </ul>
    </li>
    <li><a href="#">Gallery</a>
      <ul>
        <li><a href="#">Album 1</a></li>
        <li><a href="#">Album 2</a></li>
        <li><a href="#">Album 3</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Как видно из фрагмента, при наведении «О программе» элементы списка придерживаются одной строки, однако «Галерея» ведет себя корректно и складывается, НО элементы списка перекрывают друг друга. Я думаю, что это может быть простое решение, но я просто не могу понять это!

Answer 1

Чтобы это работало, я изменил отображение с inline-block на block при наведении курсора, а также установил float:none в элементах sub li.

Я добавил этот фрагмент css над меню:

.menu ul li> ul li{
  display: block;
  float:none;
  min-height:30px;
}

Я установил минимальную высоту 30, чтобы учесть отступы 10 сверху и снизу (20) и шрифт. Вы можете возиться с отступами / полями, но установка минимальной высоты довольно эффективна.

Надеюсь, это поможет!

*{
  padding: 0;
  margin: 0;
}

/*****
MAIN MENU
*****/
.menu ul {
  list-style: none;
  position:absolute;
  margin-top: 10px;
}

.menu ul li {
  display: inline-block;
  float:left;
}

.menu ul li a {
  background: #ccc;
  text-decoration:none;
  padding: 10px 20px 10px 20px;
}

/*****
DROPDOWN
*****/
.menu ul li> ul {
  display: none;
}

.menu ul li> ul li{
  display: block;
  float:none;
  min-height:30px;
}

.menu ul li:hover > ul{
  display: block;
  white-space: nowrap;
  
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/*****
ANIMATION KEYFRAMES
*****/
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
      <ul>
        <li><a href="#">Team</a></li>
        <li><a href="#">Roadmap</a></li>
      </ul>
    </li>
    <li><a href="#">Gallery</a>
      <ul>
        <li><a href="#">Album 1</a></li>
        <li><a href="#">Album 2</a></li>
        <li><a href="#">Album 3</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

(о, я удалил подчеркивание, установив для текста-декорации ничего - это было только моё личное предпочтение - вы можете снова это исключить ..)