css made submenu overlapping -

i have menu works submenu items overlap when there long. tried setting line-height 24px made text ok hover background color stuff small. here's 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 {    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 , (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 {      border-bottom: none;    }      .nav > ul > li {      text-align: center;    }      .nav > ul > li > {      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>

there working answers, if you'd child navigation items increase in width needed (as opposed increase in height), i'd suggest removing explicit width .nav li (inside media query), , adding instead min-width .nav > ul > li (also inside media query).

(on personal level, find more readable if navigation items increase in width needed , stick single line, instead of breaking new line , increasing in height.)

so 2 declaration blocks go from:

@media screen , (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 , (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 moved negative margin-right between declaration blocks, seemed causing issues child navigation items' backgrounds. here's jsfiddle demonstrate code in action.

hope helps! let me know if have questions.