Navigation Dropdown Issues

Question

I apologise for this being a simple issue, I've created a very simple dropdown menu, but it doesn't behave as intended. I have checked to see if the problem has existed and been asked on here before, there have been similar issues fixed with white-space: nowrap;, which I've tried to integrate but unfortunately it did not fix my problem. I'm hoping someone could point me in the right direction with this! Thank you in advance.

* {
  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>

As you can see in the snippet, when "About" is hovered, the list-items stick to one line, however the "Gallery" behaves correctly and stacks BUT the list items overlay one another. I think it may be a simple solution but I just can't seem to figure it out!

Answer 1

In order for this to work, I changed the display from inline-block to block on hover, and also set float:none on the sub li items.

I added this snippet of css above the menu hover:

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

I set the minimum height to 30 to account for padding of 10 top and bottom (20) and the font. You could fiddle about with padding/margins, but setting a min height is fairly effective.

Hope this helps!

*{
  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>

(oh, i removed the underlines by setting text-decoration to none - that was just my own personal preference - you can take that out again..)