Question

我无法弄清楚为什么我的：悬停不会改变li颜色和背景颜色。我认为它在我放入显示之前有效：table-cell和vertical-align：middle

任何帮助都会受到赞赏！

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，对吗？

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

：当使用display：table-cell on dropdown nav时，悬停不会工作

1 个答案: