Background-color for ul/div element not rendered

Question

I am trying to display navigation items (horizontally) in a blue colored ribbon. Somehow, the background-color property is not getting applied to the ul element. I tried to put it inside a div element with background as blue. Still, it doesn't work

Html snippet as,

<div style="background-color:blue;">
  <ul style="list-style-type:none;background-color:blue;">
    <li style="float:left;margin-right:10px;">cassandra</li>
    <li style="float:left;margin-right:10px;">mongodb</li>
    <li style="float:left;">couchdb</li>
  </ul>
</div>

Answer 1

Why is my background color not showing if I have display: inline?

This is the same issue as this. The div is coming out at height 0, same as the list as the float doesn't take up any space.

If you specify the height or tell them to display:inline-block it'll work.

Fiddle: http://jsfiddle.net/7vp4vz6f/