0

: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;}
4

1 に答える 1

1

li のホバー状態はありません。
目標は、サブメニューのある li がホバー状態になることですよね？

#menu li:hover,
#menu li a:hover {
 color: #ccc;
 background:#1F9BD8;
}
于 2013-06-18T19:20:03.547 に答える