css - :hover 在下拉导航中使用 display:table-cell 时不起作用

Question

我不知道为什么我的 :hover 不能改变 li 颜色和背景颜色。我认为它在我放入 display:table-cell 和 vertical-align:middle 之前有效

任何帮助将非常感激！！

http://jsfiddle.net/sadaskud/NVLwK/2/

HTML：

<div id="menu">
 <ul>
  <li><a href="#" style="width:100px">HOME</a></li>
   <li><a href="#">Contact/a></li>

     <li><a href="#">Services</a>
      <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
     </ul> 

   </li>
 </ul>
</div>

我的 CSS：

#menu {
background: #03C;
height: 50px;
width: 923px;}

#menu ul {
display: table;
margin:0;padding:0;}

#menu ul a {
text-decoration: none;}

#menu ul li {
text-align: center;
list-style: none;
float: left;}

#menu ul li a {
display: table-cell;
vertical-align: middle;
color: #fff;
width: 120px;
height: 49px;}

#menu ul ul li {
float: none;
display: none;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;}

#menu ul ul li a {
background: #3CB6E8;
color: #333;
border:none;}

#menu li a:hover {
color: #ccc;
background:#1F9BD8;}

#menu ul li a:hover, 
#menu ul li:hover ul li {
display:block !important;}

Answer 1

li 没有悬停状态。
目标是让具有子菜单的 li 处于悬停状态，对吗？

#menu li:hover,
#menu li a:hover {
 color: #ccc;
 background:#1F9BD8;
}