Horizontal Menubar

I have a horizontal menubar, and having an issue with the sub-menus. I want the sub-menus to have the same width with their headers(top li?).

Fiddle

I know one way to solve the problem, by giving fixed width to top li elements, but I don't want that. I want each category to have its own width. Is there an alternative way to fix this?

<div id="header">
    <div class="container">
        <div class="menu-container">
            <ul id="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">aaaaaaaaaa</a>
                    <ul>
                        <li><a href="#">blabla</a></li>
                        <li><a href="#">bla bla</a></li>
                        <li><a href="#">blabla bla</a></li>
                    </ul>
                </li>
                <li><a href="#">bbbbbbbbbb</a>
                    <ul>
                        <li><a href="#">blabla</a></li>
                        <li><a href="#">bla bla blabla</a></li>
                    </ul>
                </li>
                <li><a href="#">cccccccc</a>
                    <ul>
                        <li><a href="#">bla</a></li>
                    </ul>
                </li>
                <li><a href="#">ddddd</a></li>
            </ul>
        </div>
    </div>
</div>
<div id="content" class="wrapper"></div>

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}
body {
    background: rgb(36,36,36);
    font: normal 100% Arial, Verdana, sans-serif;
}
#header {
    background: rgb(16,16,16);
    border-top: 3px solid rgb(32,32,32);
    border-bottom: 1px solid rgb(32,32,32);
    z-index: 100;
}
.container {
    width: 960px;
    margin: 0 auto;
    position: relative;
}
.menu-container {
    display: table;
    margin: 0 auto;
}
#header ul {
    padding: 0;
    margin: 0;
    list-style: none;
    background: rgb(16,16,16);
}
#header ul li {
    height: auto;
    text-align: center;
    width: 130px;
}

#menu {
    overflow: auto;
    z-index: 100;
    width: 665px;
    margin: 0 auto;
}
#menu a {
    display: block;
    padding: 20px;
    font-size: 18px;
    text-align: center;
    font-family: sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: WhiteSmoke;
    border-right: 1px solid #1d1d1d;
}
#menu a:hover {
    color: white;
    background: rgb(50,50,50);
}
#menu > li {
    float: left;
}
#menu > li.active {
    background: rgb(50,50,50);
}
#menu li:nth-child(1) {
    border-left: 1px solid rgb(32,32,32);
}
#menu li:hover > ul {
    display: block;
}
#menu li ul {
    display: none;
    z-index: 100;
    width: auto;
    position: absolute;
}
#menu li ul a {
    padding: 10px 0;
}
#menu li ul li {
    border-left: 1px solid rgb(32,32,32);
    border-bottom: 1px solid rgb(32,32,32);
    font-size: .8em;
}
#menu li ul li:nth-child(1) {
    border-top: 1px solid rgb(32,32,32);
}

.wrapper {
    width: 100%;
    min-height: 500px;
    overflow: auto;
    background: rgb(36,36,36);
    border-top: 1px solid rgb(55,55,55);
}

Solution

Here's the fiddle with modified code: http://jsfiddle.net/3zj6E/1/.

The following CSS rule sets were changed:

#menu {
    overflow: auto;
    z-index: 100;
    display: table;
    margin: 0 auto;
}

#menu > li {
    float: left;
    position: relative;
}

#menu li ul {
    display: none;
    z-index: 100;
    position: absolute;
    width: 100%;
}