Curved corner problem

[ziycon]

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

This works grand:

<div id="menu_wrapper">
  <div class="bl">
    <div class="br">asd</div>
  </div>
</div>

#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?

<div id="menu_wrapper">
  <div class="bl">
    <div class="br">
      <ul>
        <li><a href="index.htm">Home</a></li>
      </ul>
    </div>
  </div>
</div>

#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.

 

[ziycon]

Got it sorted in the end, just gave up and added an image for the background of the UL with curved corners.