Html 下拉菜单是否加载所有图像？

固定的 将#媒体a更改为#媒体>a，这样它将只选择直接子项，而不是所有子项 多亏了佐尔坦·托斯

我用HTML和CSS制作了一个下拉菜单。 文本“onze media”-“adverteren”实际上是图像，而不是纯文本

在“onze media”中，我在“onze media”下设置了一些下拉菜单，但“onze media”图像会加载到每一行。它应该只在顶部，所以第一个主按钮应该是“onze media”

如何解决这个问题

HTML

图像

将#媒体a更改为#媒体>a时，主图像将被固定，但如何更改子链接的位置和图像？

将

#媒体a

和

#媒体a:悬停

更改为

#媒体a

和

#媒体a:悬停

，因此它将只选择直接子项，而不是所有子项

#媒体a{
高度：49px；
宽度：85px；
背景重复：无重复；
}
#媒体a：悬停{
高度：49px；
宽度：85px；
背景重复：无重复；
}
#媒体>a{
背景图像：URL（图像/菜单/媒体_normal.png）；
} 
#媒体>a:悬停{
背景图像：URL（图像/菜单/媒体_selected.png）；
}

您能帮助解决下一个问题吗？我在底部编辑了我的问题，我添加了一个新的图像。@F4LLCON，如果你有另外一个问题，你应该将它作为另一个问题发布。我添加了CSS-它应该像以前一样设置你所有的

-s的样式，但是只将BG图像添加到直接的childHello谢谢你，我会在周一测试它，但我确信它可以工作。我修复了它顺便说一句，它显示了一个灰色的文本和白色的文本对儿童的红色覆盖白色背景。

<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>

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