Having trouble adding a background colour on a drop down menu

Question

I'm new to html/css and i've been working on this drop down menu: http://cssdeck.com/labs/full/k0aytbkc

And this is what I'm trying to achieve.

I'm trying to add a background color on the drop down menu, but for some reason the code won't let me do that and I can't figure out where to add the background color.

Does anyone know what I need to change in the code or where I can add the background color to the drop down menu?

HTML CODE:

<div class="nav">

<ul>
<li><a href="#">MEN'S WEAR</a>
  <ul>
    <li>TOPS
      <ul>

        <li><a href="#">Jackets & Coats</a></li>
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Overshirts</a></li>
        <li><a href="#">T-Shirts</a></li>
        <li><a href="#">Basic T-Shirts</a></li>
        <li><a href="#">Knitwear</a></li>
        <li><a href="#">Sweats</a></li>   
      </ul>
    </li>
    <li>BOTTOMS
      <ul>
        <li><a href="#">Jeans</a></li>
        <li><a href="#">Colour Jeans</a></li>
        <li><a href="#">Pants</a></li>
        <li><a href="#">Shorts</a></li> 
      </ul>
    </li>
    <li>FOOTWEAR
      <ul>
        <li><a href="#">Boots</a></li>
        <li><a href="#">Sandals</a></li>
        <li><a href="#">Shoes</a></li>
        <li><a href="#">Sneakers</a></li> 
      </ul>
    </li>
    <li>ACCESSORIES
      <ul>
        <li><a href="#">Belts</a></li>
        <li><a href="#">Caps</a></li>
        <li><a href="#">Hats</a></li>
        <li><a href="#">Scarves</a></li>
        <li><a href="#">Gloves</a></li>
        <li><a href="#">Sunglasses</a></li>
        <li><a href="#">Watches</a></li>
        <li><a href="#">Jewelry</a></li>
      </ul>
    </li>
    <li>SALE
      <ul>
        <li><a href="#">Jeans</a></li>
        <li><a href="#">Caps</a></li>
        <li><a href="#">Belts</a></li>
        <li><a href="#">Sweats</a></li>
        <li><a href="#">Jewelry</a></li>
        <li><a href="#">Shirts</a></li>
      </ul>
    </li>
  </ul>
</li>
</ul>
</div>

CSS CODE:

 .nav {
 position: relative;
 background-color: #ddd;
 width: 1024px;
 height: 42px;
 margin: 0 auto;
-webkit-font-smoothing:antialiased;

}

.nav a {

font: bold 16px/20px sans-serif;
padding: 11px 20px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
     -o-transition: all .25s ease;
        transition: all .25s ease;
}

.nav ul {

list-style: none;
left: 10px;
}

.nav ul li {
position: relative;
top: 1px;
right: 70px;
}



.nav li {

float: left;
margin: 0;
padding: 0;
position: relative;
min-width: 15%;

}

.nav li ul {

visibility: hidden;
z-index: 1px;
opacity: 0;
-webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
     -o-transition: all .25s ease;
        transition: all .25s ease;  



}

.nav li a:hover {
background: #000;
color: #fff;
}

.nav li li li a:hover {
background: transparent;
color: #cd2323;
text-decoration: underline;


position: relative;
padding-left: 20px;
padding-right: 20px;
}

.nav li:hover ul {
visibility: visible;
opacity: 1;


}

.nav li li {
position: relative;
top: 30px;
margin-left: 15px;
right: 10px;
padding: 2px;
font-weight: bold;
color: 8e8e8e;
}



.nav li a {

top: 10px;
left: 30px;
position: relative;
text-decoration: none;
color: #000;
font-weight: bold;
}

.nav li li ul {
position: relative;
bottom: 10px;

}
.nav li li ul li {
right: 115px;
top: 0px;

float: none;
position: relative;

}

.nav li li ul li a {

text-decoration: none;
color: #595959;
font-size: 13px;
font-weight: normal;

}

.nav li li li ul li {
padding-right: 10px;
}

Answer 1

As a general note, it's always a good idea to use appropriately named classes rather than selectors such as this:

.nav li li li a:hover

That same effect could be achieved by giving the anchor tags a class of 'page-link' or something like that and then using a selector like this:

.page-link:hover

Then you're not counting li tags until you get to the right level. I find that it tends to make debugging simpler.

But to your question. As Adrian pointed out, the reason you aren't seeing the background color is because of the floats. When an element is floated, it's parent element does not automatically adopt the height of the floated element inside of it. Here is a very simple example: http://jsfiddle.net/jCEhL/

The i-float element has a height of 100px, but you can see the the i-dont element is completely collapsed. Even though it has a 100px element inside of it, it has no height. I gave it a blue border, just so you could see that it's collapsed. There are a whole bunch of ways to deal with this, as outlined in this post: How do you keep parents of floated elements from collapsing?

Here is a fixed version of my little example, using the 3rd method. I find it the simplest: http://jsfiddle.net/jCEhL/2/

I tweaked your css deck a little bit and I think it's somewhat close to what you're talking about. I used the 3rd method again, where you add a spacer to the end of the floated section that has clear:both on it, which fixes the height issue. I also added a clear: both to the .nav ul selector because it was colliding with the header a little bit. Have a look here: http://cssdeck.com/labs/c4zdkxrh

Once I did those two things and added a little padding to the bottom of the spacer, it looks pretty close to your example. A few more hover styles, and you'll be good to go!

Hope that helps!

Answer 2

New Answer:

I think you need to reconstruct your html. But for the meantime this is the fix for that issue. add the following styles to your css.

CSS

.nav > ul > li > ul{
overflow:hidden;
background:orange;
left:30px;
top:20px;
height:300px;
width:983px;
}

Screenshot

Answer 3

Do you want the background color to the entire drop down menu? Or do you want the background color to each lost item?

For the entire drop down menu you want to place background:color=COLOR; attribute under Nav Ul because this item is the entire Unordered list or drop down menu. Then for each list item place it under Nav Ul Li, however as listed above you could clean the code by giving each Li the same class name.

Answer 4

I hope this helps you, Change the class of all of your starting list items, as found below, and change the background color of that class

HTML

<li class="yo">SALE
<li class="yo">ACCESSORIES
<li class="yo">FOOTWEAR
<li class="yo">BOTTOMS
<li class="yo">TOPS

CSS

.yo{
background-color:grey;
}

JSFiddle Demo