Suckerfish dropdown without defined <li> width - possible?

[bydesign]

Is anyone good on suckerfish dropdowns?

I'm trying to create a nav-bar that has a suckerfish dropdown, without having a fixed width on the list items - is this possible?
(The navigation items differ in width and the nav-bar just looks crap if I fix the width on the items)

Here's the link to the page:
www.ashby-design.co.uk/mslexia/index2.html (http://www.ashby-design.co.uk/mslexia/index2.html)

I've included the relevant css for the 'mainnav' below.

There are a couple of issues:
1) I'm not able to check how it's working on Internet Explorer until later today (I work on a mac and initially test on Safari, Firefox and Opera). Is anyone out there can see how it's getting on?

2) In Firefox the width of the secondary <ul> doesn't match the width of the primary one - can this be remedied (again, without fixing the width…).

THE CSS
From: www.ashby-design.co.uk/mslexia/css/default2.css (http://www.ashby-design.co.uk/mslexia/css/default2.css)

/* =Main Nav
-----------------------------------------------------------------------------*/
/* mainnav list */
ul#mainnav {
width: 100%;
float: left;
background-color:#000;
margin-bottom: 5em;
}

/* mainnav list items */
ul#mainnav li {
position: relative;
float: left;
z-index: 10
}

ul#mainnav a {
display: block;
padding: 0 1em;
font-size: 1.3em;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 3.5em;
background: url(../images/architecture/divider.gif) no-repeat left 50%;
}

ul#mainnav .first a {padding-left: 15px; background: none}


/* mainnav second-level lists */
ul#mainnav li ul {
display: none;
top: 1em;
left: 0;
position: absolute;
padding-bottom: 10px;
border-bottom-style: solid;
border-bottom-width: 5px;
background-image: url(../images/architecture/mainnav_bg.png);
}

ul#mainnav li ul a {
padding: 0 0.8em 0 1em;
line-height: 2em;
text-transform: none;
letter-spacing: normal;
background: none;
}

ul#mainnav li > ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

ul#mainnav li:hover ul, ul#mainnav li.over ul { /* lists nested under hovered list items */
display: block; }

[KDLA]

You need to have a width on the floated elements, or they will expand to the width of the parent container.

What I've done for instances like that is to create several <li> classes which have the appropriate widths for the contents. You'll need to apply these widths to the nested <ul>'s, also.
Example:

ul#mainnav li.mag {width: 10em;}
ul#mainnav li.nuts {width: 12em;}

--
You may want to look at this in IE6. The layout (page and menu) is a real mess. Looks like it has to do with the positioning. Your CSS/HTML validates.

[bydesign]

Yep - makes sense and easy enough.

Yes - on the IE6 - I've swapped in a new stylesheet to try to get a jello mould so that my min-width would work in IE; it's a complete and utter mess so far!

Have swapped back to the original one, which looks ok - but I think things are going to fall apart in small browser windows

[Centauri]

You need to have a width on the floated elements, or they will expand to the width of the parent container.

The <li>s will only expand when the <a>s are blocks with no defined width, and only in IE - floating the <a>s left as well will resolve that.