下拉菜单加载所有图像？

Question

已修复 将 #media a 更改为 #media > a，因此它将仅选择直接子级而不是所有子级 感谢 Zoltan Toth，

我用 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 > 时a 主图像将被修复，但如何更改子链接的位置和图像？

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