css made submenu overlapping

Question

I have a menu that works really well but the submenu items overlap when there are too long. I tried setting the line-height to 24px which made the text ok but then the hover background color stuff was too small. Here's the code:

.nav ul {
  list-style: none;
  background-color: #5FD6D6; /*nav background */
  text-align: center;
  padding: 0;
  margin: 0;
}
.nav li {
  border-bottom: 1px solid #888;
}
 
.nav a {
  text-decoration: none;
  color: black; /* font color */
  display: block;
  transition: .3s background-color;
}
 
.nav a:hover {
  background-color: #BFEFEF; /* hover color */
}
 
.nav a.active {
  background-color: #ED1C24; /*selected color */
  color: white;
  cursor: default;
}

  /* Sub Menus */
.nav li li {
  font-size: 1em;
}


@media screen and (min-width: 650px) {
  .nav li {
    width: 150px;
    border-bottom: none;
    height: 100px;
    line-height: 100px;
    font-size: 2em;
    display: inline-block;
    margin-right: -4px;
  }

  .nav a {
    border-bottom: none;
  }

  .nav > ul > li {
    text-align: center;
  }

  .nav > ul > li > a {
    padding-left: 0;
  }

  /* Sub Menus */
  .nav li ul {
    position: absolute;
    display: none;
    width: inherit;
  }

  .nav li:hover ul {
    display: block;
  }

  .nav li ul li {
    display: block;
  }
}

<div class="nav">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Tutorials</a>

            <ul>
                <li><a href="#">Tutorial #1@@</a>
                </li>
                <li><a href="#">Tutorial #2</a>
                </li>
                <li><a href="#">Tutorial #3</a>
                </li>
            </ul>
        </li>
        <li><a class="active" href="#">About</a>
        </li>
        <li><a href="#">Newsletter</a>

            <ul>
                <li><a href="#">News #1</a>
                </li>
                <li><a href="#">News #2@@@</a>
                </li>
                <li><a href="#">News #3</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

There are already some working answers, but if you'd like the child navigation items to increase in width as needed (as opposed to increase in height), I'd suggest removing an explicit width from .nav li (inside the media query), and adding it instead as a min-width to .nav > ul > li (also inside the media query).

(On a personal level, I find it much more readable if navigation items increase in width as needed and stick to a single line, instead of breaking to a new line and increasing in height.)

So those two declaration blocks would go from:

@media screen and (min-width: 650px) {
  .nav li {
    width: 150px;
    border-bottom: none;
    height: 100px;
    line-height: 100px;
    font-size: 2em;
    display: inline-block;
    margin-right: -4px;
  }

  .nav > ul > li {
    text-align: center;
  }
}

To:

@media screen and (min-width: 650px) {
  .nav li {
    border-bottom: none;
    height: 100px;
    line-height: 100px;
    font-size: 2em;
    display: inline-block;
  }

  .nav > ul > li {
    text-align: center;
    min-width: 150px; /* new */
    margin-right: -4px; /* moved */
  }
}

Note that I also moved the negative margin-right between the declaration blocks, as this seemed to be causing some issues with the child navigation items' backgrounds. Here's a JSFiddle to demonstrate the code in action.

Hope this helps! Let me know if you have any questions.

Answer 2

I don't like setting line-height that big except for special cases. In your case, instead of having that big I believe it's more appropriate to use padding.

So to do that:

First remove line-height and height on .nav li, then it will now look like this.

.nav li {
  width: 150px;
  border-bottom: none;
  font-size: 2em;
  display: inline-block;
  margin-right: -4px;
}

Then in your .nav a add a padding :

.nav a {
  text-decoration: none;
  color: black;
  display: block;
  transition: .3s background-color;
  padding: 1em 0;
}

This way, your list are more flexible than having a fixed height.

Working example

.nav ul {
  list-style: none;
  background-color: #5FD6D6; /*nav background */
  text-align: center;
  padding: 0;
  margin: 0;
}
.nav li {
  border-bottom: 1px solid #888;
}
 
.nav a {
  text-decoration: none;
  color: black; /* font color */
  display: block;
  transition: .3s background-color;
  padding: 1em 0;
}
 
.nav a:hover {
  background-color: #BFEFEF; /* hover color */
}
 
.nav a.active {
  background-color: #ED1C24; /*selected color */
  color: white;
  cursor: default;
}

  /* Sub Menus */
.nav li li {
  font-size: 1em;
}


@media screen and (min-width: 650px) {
  .nav li {
    width: 150px;
    border-bottom: none;
    font-size: 2em;
    display: inline-block;
    margin-right: -4px;
  }

  .nav a {
    border-bottom: none;
  }

  .nav > ul > li {
    text-align: center;
  }

  .nav > ul > li > a {
    padding-left: 0;
  }

  /* Sub Menus */
  .nav li ul {
    position: absolute;
    display: none;
    width: inherit;
  }

  .nav li:hover ul {
    display: block;
  }

  .nav li ul li {
    display: block;
  }
}

<div class="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
          <ul>
            <li><a href="#">Tutorial #1@@</a></li>
            <li><a href="#">Tutorial #2</a></li>
            <li><a href="#">Tutorial #3</a></li>
          </ul>
        </li>
        <li><a class="active" href="#">About</a></li>
        <li><a href="#">Newsletter</a>
          <ul>
            <li><a href="#">News #1</a></li>
            <li><a href="#">News #2@@@</a></li>
            <li><a href="#">News #3</a></li>
          </ul>
        </li>
      </ul>
    </div>

Answer 3

You can remove the "height", that worked for me:

.nav li {
    width: 150px;
    border-bottom: none;
    /*height: 100px;*/
    line-height: 100px;
    font-size: 2em;
    display: inline-block;
    margin-right: -4px;
  }