显示css菜单的问题

Question

我的CSS菜单显示不正确，子菜单项在父菜单上结束。 当子菜单中的项目多于父项目时，会出现此问题。

非常感谢任何想法如何解决这个问题。

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; 

} 

为什么所有3子菜单项显示父菜单呢？

子菜单在悬停父菜单项时正确显示，但子菜单项中的2项也显示在父菜单中，为什么？

Answer 1

将ul li:hover>ul更改为ul li:hover ul。

>是一个子选择器。在MDN和W3C了解更多。

Working Fiddle