Problems displaying css menu

Question

My CSS menu is not displaying correctly, the sub menu items ends up on the parent menu. The problem occurs when there are more items in the sub menu than in the parent.

Many thanks for any ideas how to fix this.

HTML

<nav>
    <ul>
      <li id="databases"/>
      <li id="chartButton" class="dropdown">
        Charts
        <ul>
          <li>Completed/Aborted</li>
          <li>Average Response Times</li>
          <li>Average TPS</li>
          <li>Top 10 Completed</li>
          <li>Top 10 Aborted
            <ul>
                <li>Last 10 Min</li>
                <li>Last 10 Hours</li>
                <li>Last 10 Days</li> 
            </ul>
          </li>
        </ul>
      </li>
      <li id="processes"/>
    </ul>   
</nav>

CSS

ul {
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
  text-align: left;
  display: inline;
  margin: 0;
  padding: 10px 0px 10px 25px;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.01);
}
ul li {
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
  font: bold 20px;
  display: inline-block;
  font-family: "Montserrat",sans-serif;
  margin-right: -4px;
  position: relative;
  padding: 10px 20px 10px 15px;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
  padding: 0;
  position: absolute;
  top: 37px;
  left: 0;
  width: 250px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;  
}
ul li ul li:hover { 
 background: #666; 
}
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

li.dropdown ul {
    display : none;
}


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


nav ul li ul li:hover ul{
    position: absolute; left: 100%; top:0;

}

Why is all 3 sub menu items showing up in parent menu?

Sub menu is showing correctly when hovering the parent menu item, but 2 of the sub menu items is also showing up in parent menu, why?

Answer 1

Change ul li:hover>ul to ul li:hover ul.

> is a child selector. Learn more about it on MDN and W3C.

Working Fiddle