Menu with rounded corners

Question

i'm trying to create a menubar with rounded corners, but when i add the float:left to the li elements, the rounded corners dissapear...

This is my code:

<ul>
  <li>jkfasdf</li>
  <li>jkfasdf</li>
  <li>jkfasdf</li>
</ul>

ul{
  background: red;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

li {
  padding: 5px;
  #float: left; #toggle this
}

Answer 1

add overflow:hidden to ul's css:

ul{
  background: red;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow:hidden;
}

Currently, when you add a float:left; ul became 0px height. That why it looks like rounded corners disappear.

overflow:hidden is one of the fixes for such issues. See demo here: http://jsfiddle.net/2x3Vm/

Answer 2

If all you want to do is show your LI's next to eachother, display: inline-block; might actually work better than floating the elements.