下拉菜單加載所有圖像？

Question

固定 變化的#media一個到的#media>一，所以它會只選擇直接的孩子，而不是所有的子兒 感謝佐爾坦·託斯

我做了一個下拉菜單與HTML和CSS。 文字'onze media' - 'adverteren'實際上是圖像並且沒有純文本。在'onze media'我已經在'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 a更改爲#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); 
}