下拉菜单加载所有图像？

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); 
}