CSS Drop Down menu being cut off by parent div height

[mmss]

In my set up I have my navigation bar set horizontally and contained within my header div like this:\[code\]<div id="header-section"> <div id="main-menu-wrapper"> <ul id="main-menu"> <li><a href="http://stackoverflow.com/questions/13867353/index.html">Home</a></li> <li><a href="http://stackoverflow.com/questions/13867353/#">Services</a> <ul id="sub-men"> <li><a href="http://stackoverflow.com/questions/13867353/#">Service 1</a></li> <li><a href="http://stackoverflow.com/questions/13867353/#">Service 2</a></li> <li><a href="http://stackoverflow.com/questions/13867353/#">Service 3</a></li> </ul> </li> </ul> <div class="clear"></div> </div></div>\[/code\]My problem is that the sub-menu is not showing because the height on "main-menu-wrapper" is set to auto. The sub-menu is showing when I set a height like 100px. When I set the position on the sub-menu to static instead of absolute, it expands the entire main-menu-wrapper. How can I get the sub-menu to show properly?Here's the CSS portion for my whole header section:\[code\]#header-section {position: relative;width: 100%;padding: 5px 0px;background: #740600;}#main-menu-wrapper {position: relative;width: 74%;min-width: 600px;height: auto;margin: 0% auto;}#main-menu {list-style: none;font-weight: bold;line-height: 150%;}#main-menu li {position: relative;float: right;margin: 0px 5px;}#main-menu a {padding: 3px;color: #ffffff;background: #740600;text-decoration: none;border-radius: 5px;}#main-menu a:hover {padding: 3px;color: #740600;background: #ffffff;text-decoration: none;}#main-menu li ul {position: absolute;display: none;}#main-menu li ul li{float: none;}#main-menu li:hover ul {display: block;}#main-menu li ul a {padding: 3px;color: #ccc;background: #740600;text-decoration: none;border-radius: 5px;}#main-menu li ul a:hover {padding: 3px;color: #740600;background: #ccc;text-decoration: none;}#banner-wrapper {position: relative;padding: 5px 0 5px;}#banner {position: relative;max-width: 75%;min-width: 600px;margin: 0% auto;background: #ffffff;}#logo {max-width: 600px;height: auto;}\[/code\]