CSS dropdown menu..works but prob with IE>>

http://www.nitrovortex.com/test/ericMeyer2.htm

After working closely to a version I in this Eric Meyer book I've got a dropdown menu working fine in both FF and IE but theres something I wasn't happy with, I wanted the first label "short" to be guess what..shorter than the rest so the gaps between button labels was more even.

To do this I thought I'd add another class just for that shorter <li> the bits I added and changed were:

div#nav li {position: relative; list-style: none; margin: 0; float: left; width: 7em; border-bottom: 1px solid #CCC;}

and the html:
<li class="submenu"><a href="#">Short</a>

got changed to:

added this:
div#nav li.shorter {position: relative; list-style: none; margin: 0; float: left; width: 5em; border-bottom: 1px solid #CCC;}

and changed the html of that short label to:
<li class="shorter submenu"><a href="#">Short</a>

Here's the result: http://www.nitrovortex.com/test/ericMeyer3.htm

The first option "short" is indeed narrower as I wanted in FF but in IE my changes dont do ~*&% :(

Does IE not like nested classes? can anyone see why this aint working in IE?