css dropdown menu-item width problem

With css dropdown menu, I am having trouble with the width of menu items. I want the menu buttons to take on the width of the text inside, and then have a set pixel margin, for example as this code does(basic horizontal menu):

#navi {
position:relative;
list-style-type:none;
margin-top:15px;
padding: 0;
}

#navi li {
display:inline;
margin: 0;
margin-right:30px;
}

but now I am working with a more advanced rollover menu, with the following html and css:

body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}

s

body {
behavior: url(csshover.htc);
}

#menu {
width: 100%;
background: #eee;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 6em;
float: left;
}

#menu a, #menu h2 {
display: block;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #ff0000;
}

#menu a {
color:#ffffff;
background: #00ff00;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

div#menu ul ul {
display: none;
}

div#menu ul li:hover ul
{display: block;}

You can see the menu buttons have a set width:
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 6em;
float: left;
}

I want the width to take the size of the text content, but when I set width to "auto", the buttons stack vertically and the whole horizontal menu is destroyed.... I am guessing it has something to do with one of the display or float settings, but nothing I try works in the way I want, which as I have described is not a set width for each menu button, but an auto width taking the width of the text content, plus a margin between the buttons. Any ideas?