Question

FIXED
change #media a to #media > a, so it will select only the direct child and not all sub-children
Thanks to Zoltan Toth

I have made a drop down menu with HTML and CSS.
The text ‘onze media’ – ‘adverteren’ are actually images and no plain text.

At ‘onze media’ I’ve set some drop menu under ‘onze media’ but the ‘onze media’ image is loaded on every line. It’s supposed to be only at the top, so the first main button needs to be ‘onze media’

How to fix this?

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

Image

When changing #media a to #media > a the main image will be fixed but how do I change position and images of the sub links?

Answer 1

change #media a and #media a:hover to #media > a and #media > a:hover, so it will select only the direct child and not all sub-children

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