Curved corner problem

Advert test
#1
I can get the curved corners to work grand but once I add a UL in they disappear.

This works grand:
Code:
<div id="menu_wrapper">
  <div class="bl">
    <div class="br">asd</div>
  </div>
</div>
Code:
#menu_wrapper {
    float: left;
    width: 1000px;
    height: 30px;
    clear: left;
}
#menu_wrapper .bl {
    width: 20em;
    background: url('../images/layout/menu_bl.png') 0 100% no-repeat #330000;
}
#menu_wrapper .br {
    background: url('../images/layout/menu_br.png') 100% 100% no-repeat;
}
But once I change th code to this the curved corners disappear and I've tried everything to make them show up but no luck, any ideas?
Code:
<div id="menu_wrapper">
  <div class="bl">
    <div class="br">
      <ul>
        <li><a href="index.htm">Home</a></li>
      </ul>
    </div>
  </div>
</div>
Code:
#menu_wrapper {
    float: left;
    width: 1000px;
    height: 30px;
    clear: left;
}
#menu_wrapper .bl {
    width: 20em;
    background: url('../images/layout/menu_bl.png') 0 100% no-repeat #330000;
}
#menu_wrapper .br {
    background: url('../images/layout/menu_br.png') 100% 100% no-repeat;
}
#menu_wrapper ul {
    float: left;
    width: 100%;
    margin: 0px;
    padding: 0px;
    border-top: 1px #666666 solid;
    background-color: #330000;
    list-style: none;
    clear: left;
}
#menu_wrapper ul li {
    display: inline;
}
#menu_wrapper ul li a {
    float: left;
    width: 120px;
    height: 24px;
    padding: 6px 0 0 0;
    color: #FFFFFF;
    font-size: 12px;
    text-decoration: none;
    text-align: center;
    display: block;
}
#menu_wrapper ul li a:hover {
    float: left;
    width: 120px;
    height: 24px;
    padding: 6px 0 0 0;
    color: #330000;
    background-color: #FFFFFF;
    font-size: 12px;
    text-decoration: underline;
    display: block;
}
Thanks in advance.
 
Top