Background-color problem in dropdown menu

Loo开发者_如何学Gok at this

http://jsfiddle.net/esTzk/

How come the color on my #header won't apply ?

Give it a height or hide the overflow and it will. Either will work in this case.

#header{
  background:#2b2b2b;
  color:#fff;
  width:100%;
  height:200px; /* overrides float calculations */
  overflow:hidden; /* clears floats */
}

http://jsfiddle.net/AlienWebguy/esTzk/1/

Give your header a height, because you dont want it be greater than a certain value anyway:

#header{
  background-color:#2b2b2b;
  color:#fff
  width:100%;
  height:20px;
}

a better solution would be to move the div with clear both inside the header.

<div id="header">
  <ul id="nav">
    <li>Service Provider
      <ul>
        <li>Vendor / Manufacturer</li>
        <li>Service Type</li>
        <li>Service Technician</li>
      </ul>
      <div style="clear:both"></div>
    </li>
    <li>Cities & Stations
      <ul>
        <li>Stations</li>
        <li>Station Owner</li>
      </ul>
      <div style="clear:both"></div>
    </li>
    <li>Firefighter</li>
    <li>PPE Management</li>
    <li>Care & Maintenance</li>
    <li><a href="index.php?logout=yes">Logout</a></li>
  </ul>
  <div style="clear:both"></div>
</div>

Just to add for your knowledge, it is because of the float:left in the #nav li selector. Because the elements inside the #header div are floated the #header div is set to height=0. That's why it won't display the background color before you specify a height for it or clear the float.