Problems with list <ul> sub <ul> list

[ehart]

Sub list for button "Environmental Health". It is not a drop down just list sub smaller buton inder Environmental Health. It works in all browsers BUT IE7. It seems that it is not making that same for the sub ul list. The sub list is under the list in IE7.
Please can some one help?!?!?!?!?


HTML code:
<div id="leftnav">
<ul id="left_button">
<li><a href="environmental_health.html" class="leftbuttons">Environmental Health</a></li>
<ul id="sub_button">
<li><a href="food_services.html" >Food Services</a></li>
<li><a href="on_site_sewage.html" >On-Site Sewage</a></li>
<li><a href="public_pools.html" >Public Pools</a></li>
<li><a href="tourist_accommodations.html" >Tourist Accommodations</a></li>
<li><a href="well_water.html" >Well Water</a></li>
<li><a href="chemical_hazards.html" >Chemical Hazards</a></li>
<li><a href="indoor_air_quality.html" >Indoor Air Quality</a></li>
<li><a href="west_nile_virus.html" >West Nile Virus</a></li>
<li><a href="tick_borne_diseases.html" >Tick-borne Diseases</a></li>
<li><a href="smoke_free_air_act.html" >Smoke free Air Act 2005</a></li>
</ul>
<li><a href="immunizations.html" class="leftbuttons">Immunizations</a></li>
<li><a href="turberculosis.html" class="leftbuttons">Turberculosis</a></li>
</ul>
</div>






CSS code:
#leftnav {
background-color: #63ce28;
font-size: 12px;
list-style-type:none;
width: 190px;
height:auto;
float:left;
line-height:10px;
font-weight: bolder;
}

#leftnav li {
background:url(images/button-left.gif) 0 0 no-repeat;
width:190px;
height:41px;
margin-left:0px;
}

#leftnav img {
border: none;
margin: 0px auto;
}

#leftnav ul li {
width: 190px;
}

#leftnav ul {
margin-left:-40px;
margin-top:0px;
}

#leftnav li a {
text-decoration:none;
color: #14637f;
margin-left: 20px;
margin-top:35px;
}


#sub_button li {
background-color: #ace58d;
width:20px;
height:21px;
line-height:23px;
margin-bottom:2px;
margin-left:10px;
padding-left:10px;
background:url(images/arrow.png) 0 0 no-repeat;
}