为什么：hover选择器只能在<li>？</li>的底部工作

Question

当我将鼠标悬停在顶级菜单项“（div＆gt; ul＆gt; li）”时，以下css行似乎只适用于列表项的下半部分。

#header > ul > li:hover > ul{
    display:block;
}

当我将鼠标悬停在大写字母的顶部时，子菜单不会显示，但悬停在列表项底部会显示子菜单。

---

以下是所有代码

<div id="header">
<ul>
 <li>
  <a href=""></a>
   <ul>
    <li><a href=""></a></li>
   </ul>
  </li>
  <li>
   <a href=""></a>                  
   <ul>                 
    <li>
     <a href=""></a></li>
    <li><a href=""></a></li>
   </ul>
  </li>
  <li><a href=""></a>
      <ul>
       <li><a href=""></a></li>
       <li><a href=""></a></li>
      </ul>
  </li>
  <li><a href=""></a>
      <ul>
       <li><a href=""></a></li>
      </ul>
  </li>
  <li><a href=""></a>
      <ul>
       <li><a href=""></a></li>
      </ul>
  </li>
 </ul>
</div>

#header{
    padding: 0;
}
#header ul{
    list-style-type:none;
}
#header > ul > li{
    margin:0 2px;
    padding:0 5px;
    position:relative;
    display:inline-block;
}
#header > ul > li > a{
    padding:2px 5px 0 5px;
    width:130px;
    text-decoration:none;
    display:inline-block;
}
#header > ul > li > ul{
    width:140px;
    padding:2px 0 0 0;
    margin:0;
    display:none;
    position:absolute;
    background:#24B948;
}
#header > ul > li:hover > ul{
    display:block;
}
#header > ul > li > ul > li{
    margin:0;
    padding:0;
}
#header > ul > li > ul > li > a{
    color:#FFB5D2;
    padding:4px 5px;
    text-decoration:none;
    width:130px;
    display:block;
}
#header > ul > li > ul > li > a:hover{
    color:#24B948;
    background:#FFB5D2;
}

a {
    color: #003d4c;
    text-decoration: underline;
    font-weight: bold;
}
a:hover {
    color: #367889;
    text-decoration:none;
}