I am currently building a very simple drop down menu. There is one link that when rolled over I present 4 more options, vertical, blocked. My problem is that I do not want to set a fixed width. I want the pop out or drop down to be only as wide as the contents inside of it without breaking the line into 2 lines. Is this possible without setting a fixed width? The problem is that the contents of the drop down are dynamic and pulled from a database and I want them to appear on a single line in the drop down (no wrapping).

Say for example the link "View Customers" is on a web page. when I scroll over it I want the View customers to have background shading only as wide as the words "view customers". However the drop down that results from the mouse over is the name of 4 customers appearing on 4 separate lines. I want the shading around that to be as wide as the longest customer name:

1. Customer
2. This is a customer
3. Holy customer Batman!
4. This is a really long customer name.

Which in this example would be #4. "This is a really long customer name."

My code below is working but is not allowing me the amount of control that I need on the width. Can anyone make some suggestions?

Thanks
jDub

CODE FOLLOWS:

body {

text-align: left;
padding: 0;
margin: 2em;
}

#nav, #nav ul {
float: left;
width: none;
list-style: none;
/*line-height: 1;*/
background: white;
font-weight: bold;
padding: 0;

}

#nav a {/*View Customers level*/
display: block;
width: 10em;
color: #111144;
font: 78%/1.5 arial, helvetica, serif;
font-weight: bold;
text-decoration: none;
padding: 2px;
}

#nav li {
float: left;
padding: 0;
width: 10em;
}

#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
width: 13.9em;
font-weight: normal;
color: #7C6240;
font: 78%/1.5 Times Roman, Times, serif;
border-width: 0.25em;
margin: 0;
}

#nav li li {/*This changes the width of the pop out box shading in Firefox Does nothing in IE*/
padding-right: 1em;
width: 15em
}


#nav li ul a {/*this changes the width of the pop out box*/
width: 25em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
background: #CCCCFF;

}

/code

can you give us some example HTML to go with that CSS?