ドロップダウンメニューはすべての画像をロードしますか？

Question

にします。#media> Aます。#media FIXED 変更に、それは私がドロップダウンメニューを作ってきたすべてのサブ子どもゾルタン・トスに おかげ

を唯一の直接の子を選択しないようにHTMLとCSSで テキスト 'onze media' - 'adverteren'は実際には画像であり、プレーンテキストではありません。

'onze media'では、 'onze media'の下にいくつかのドロップメニューを設定しましたが、 'onze media'イメージはすべての行にロードされています。最初のメインボタンは「オンズメディア」である必要があります。

これを修正するにはどうすればいいですか？

HTML

<ul id="drop-down-menu"> 
    <li id="home"><a href=""></a></li> 
    <li id="media"><a href=""></a> 
    <ul> 
     <li id="1a"><a href="">Blabla</a></li> 
     <li id="1b"><a href="">Blabla Beauty</a></li> 
     <li id="1c"><a href="">Blabla Slijterij</a></li> 
     <li id="1d"><a href="">Blabla</a></li> 
     <li id="1e"><a href="">Blabla App</a></li> 
     <li id="1f"><a href="">Blabla.nl</a></li> 
     <li id="1g"><a href="">Blabla.nl</a></li> 
     <li id="1h"><a href="">Blabla.nl</a></li> 
    </ul> 
    </li> 
    <li id="ad"><a href=""></a></li> 
    <li id="ons"><a href=""></a></li> 
    <li id="co"><a href=""></a></li> 
</ul> 

CSS

#drop-down-menu{ 
} 
ul{ 
    margin:0; 
    padding:0; 
    list-style:none; 
} 
ul li{ 
    display:block; 
    position:relative; 
    float:left 
} 
li ul{ 
    display:none 
} 
ul li a{ 
    display:block; 
    margin-left:1px; 
    text-decoration:none; 
    padding: 5px 15px 5px 15px; 
    white-space:nowrap; 
} 
ul li a:hover{ 
    color:inherit; 
} 
li:hover ul{ 
    display:block; 
    position:absolute; 
} 
li:hover li{ 
    font-size:70%; 
    clear:left; 
    width:12em; 
} 
li:hover a{ 
    color:inherit; 
} 
li:hover li a:hover{ 
    color:inherit; 
} 
.clear_all{ 
    clear:both; 
    height:0.5em; 
} 
#home a{ 
    height:55px; 
    width:206px; 
    background-repeat:no-repeat; 
    background-image : URL(images/menu/home_normal.png); 
} 
#home a:hover{ 
    height:55px; 
    width:206px; 
    background-repeat:no-repeat; 
    background-image : URL(images/menu/home_selected.png); 
} 
#media a{ 
    height:49px; 
    width:85px; 
    background-repeat:no-repeat; 
    background-image : URL(images/menu/media_normal.png); 
} 
#media a:hover{ 
    height:49px; 
    width:85px; 
    background-repeat:no-repeat; 
    background-image : URL(images/menu/media_selected.png); 
} 
#ad a{ 
    height:49px; 
    width:90px; 
    background-repeat:no-repeat; 
    background-image : URL(images/menu/ad_normal.png); 
} 
#ad a:hover{ 
    height:49px; 
    width:90px; 
    background-repeat:no-repeat; 
    background-image : URL(images/menu/ad_selected.png); 
} 
#ons a{ 
    height:49px; 
    width:69px; 
    background-repeat:no-repeat; 
    background-image : URL(images/menu/over_normal.png); 
} 
#ons a:hover{ 
    height:49px; 
    width:69px; 
    background-repeat:no-repeat; 
    background-image : URL(images/menu/over_selected.png); 
} 
#co a{ 
    height:49px; 
    width:65px; 
    background-repeat:no-repeat; 
    background-image : URL(images/menu/contact_normal.png); 
} 
#co a:hover{ 
    height:49px; 
    width:65px; 
    background-repeat:no-repeat; 
    background-image : URL(images/menu/contact_selected.png); 
} 

画像

ます。#mediaにします。#media変更する場合

>メイン画像が修正されますが、どのように私は位置とサブリンクの画像を変更できますか？

Answer 1

#media > aと#media > a:hoverへの変更#media aと#media a:hoverに、それが唯一の直接の子を選択しないように、すべてのサブ子供

#media a{ 
    height:49px; 
    width:85px; 
    background-repeat:no-repeat; 
} 

#media a:hover{ 
    height:49px; 
    width:85px; 
    background-repeat:no-repeat; 
} 

#media > a{ 
    background-image : URL(images/menu/media_normal.png); 
} 

#media > a:hover{ 
    background-image : URL(images/menu/media_selected.png); 
}