F4LLCON F4LLCON - 23 days ago 5
CSS Question

Drop down menu loads all images?

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

enter image description here

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?

enter image description here

Answer

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