CSS：不同 <li> 亲子背景和大小

Question

<div class="menu3" >
 <ul class="cssMenu">   
  <li>
   <a href="#">Parent</a>       
    <ul class="cssMenuA">
        <li><a href="#"><span>Child1</a></span></li>
        <li><a href="#"><span>Child2</span></a></li>
        <li><a href="#"><span>Child3</span></a></li>
    </ul>
  </li>
 </ul>
</div>

.menu3 {
background: url(../images/menu3.png) no-repeat;
float:left;
width:134px;
height:50px;}

.menu3 a:hover {
background: url(../images/menu3-hover.png) no-repeat;
float:left;
width:134px;
height:50px;}

    ul.cssMenuA ul li { 
        float:left;
        background: #FFA900;
        width: 90px; 
        height:25px; 
        display: inline;            
    }

    ul.cssMenuA ul li a { 
        background: #FFA900;
        width: 90px; 
        height:25px;
        display: block;
        font-family: Arial, Times New Roman, Tahoma;
        font-size: 14px;
        color:#000000;
    } 

    ul.cssMenuA ul li a:hover{ 
        background: #FFA900;
        width: 90px; 
        height:25px; 
        display: inline;
        font-family: Arial, Times New Roman, Tahoma;
        font-size: 14px;
        color:#FFF;
    }

我想让我的父母 ul/li和孩子 ul/li具有不同但固定的大小。 我已经class="menu3"项class="menu3"定义了背景图像，但是我想要一个不同的非图像class="cssMenuA"和3 class="cssMenuA" 。 但是孩子们也将图像用作父项。

希望您能理解我的问题，并希望能帮助我解决这个问题。 先感谢您。

Answer 1

只需将.menu3 a:hover {}更改为.menu3 > li > a:hover ：

.menu3 > li > a:hover {
    background: url(../images/menu3-hover.png) no-repeat;
    float:left;
    width:134px;
    height:50px;
}

使用此CSS，您将搜索直接的<li>子代，在其中搜索直接的<a>子代（这意味着您不必关心子子代<a> ）。