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

【问题标题】：:hover wont work when using display:table-cell on dropdown nav:hover 在下拉导航中使用 display:table-cell 时不起作用
【发布时间】：2013-06-18 19:11:37
【问题描述】：

我不明白为什么我的 :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;}

【问题讨论】：

display:block !important 最后的意义何在？这显然是造成它的原因，但你为什么会有它？
@zenith: 激活子菜单
@OneTrickPony 我的意思是包括 #menu ul li a:hover 位 - jsfiddle.net/NVLwK/5
是的，这没有任何意义。也许 OP 认为它会增加与 IE 7 的兼容性？:)
@Zenith 啊谢谢你指出这一点！我从模板中获得了其中的一部分，因为这是我第一次尝试子菜单。现在可以使用了

标签： css drop-down-menu hover vertical-alignment

【解决方案1】：

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

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

【讨论】：

#menu ul li:hover ul li { display:block !important; } ==> 如果您将a 选择器从中取出，它不会在悬停时移动...