html - CSS：不同亲子背景和尺寸

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有不同但固定的尺寸。我已经为我的 Parent item 定义了一个背景图像class="menu3"，但我想要一个不同的非图像 Child1, 2 和 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>）。