下拉菜单加载所有图像？

Question

固定 将#media a更改为#media＆gt; 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＆gt; 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 );
}