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"定义了背景图像，但我想要一个不同的非图像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>）。

CSS：不同的<li>父子背景和大小</li>

1 个答案: