1 
<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"です。しかし、子供たちは親アイテムとして画像も使用しています。

私の問題を理解していただき、この問題を解決できることを願っています。前もって感謝します。

4

1 に答える 1

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>(つまり、 subchildren を気にする必要はありません<a>)。

于 2013-03-29T20:03:33.827 に答える