How to remove hardcoded widths and offsets from vertical drop-down menu - css

Question

After following a couple of tutorials I have managed to build up a CSS-only vertical drop-down menu. However, the widths and absolute offsets are hardcoded and I cannot get them to adjust automatically according to their contents. I wish to avoid hardcoding these because I wish to integrate it into a CMS where I don't know the actual lengths of the menu items.
I have created a JSFiddle here showing the menu working: http://jsfiddle.net/nhfHw/2/
The top level items are currently hardcoded to a width of 100px (I wish to make this adjust according to the longest item at that level.) When I tried to remove that, it just expanded the next sub-level all over the screen.
#navigation
{
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #707070;
line-height: 20px;
width: 100px; /* I wish to remove this */
margin-top: 30px;
}
The x offset of the sub-levels is also hard-coded. I wish them to just adjust according to their parent's width. Their width is also hardcoded to 200px.
li:hover .sub-level
{
background: #D0D0D0;
display: block;
position: absolute;
left: 100px; /* I wish to remove this */
top: 0px;
}
li:hover .sub-level .sub-level
{
left: 210px; /* I wish to remove this */
top: 0px;
}
ul.sub-level li
{
border: none;
float:left;
width: 200px; /* I wish to remove this */
}
I wish to avoid Javascript if possible.

Answer 1

A combination of display: inline-block and white-space: nowrap I believe gets you what you're looking for: http://jsfiddle.net/nhfHw/14/
#nav {
display: inline-block;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #707070;
line-height: 20px;
margin-top: 30px;
}
#nav ul li {
padding: 1px 5px;
list-style: none;
white-space: nowrap;
display: block;
position: relative;
}
#nav ul li:hover {
background: #E0E0E0;
}
#nav ul li a {
text-decoration: none;
color: #707070;
display: block;
}
#nav ul ul {
display: none;
border-left: 1px solid #ccc;
position: absolute;
left: 100%;
top: 0px;
}
#nav ul li:hover > ul {
display: block;
}

Answer 2

Here just what the answer above me did, but without bugs...
http://jsfiddle.net/techsin/UBgZf/2/ Updated
*{padding:0;margin:0;}
.main{position:relative;}
ul ul{
display:none;
position:absolute;
left:100%;
margin-top:-30px;
}
.main>li>ul{
background-color:#BDBDBD;
}
ul {
white-space: nowrap;
color:white;
background-color:gray;
float:left;
}
li{
height:20px;
list-style-type:none;
padding:10px;
clear:both;
}
li:hover>ul{
background-color:black;
display:block;
}
Tricks include:
White Space No wrap
float
absolute positioning so it always refer to first element that has been positioned either absolute or relative.