navigation bar using relative <li> instead of absolute

Hi everyone...
I am trying to follow this tutorial on list apart:
http://www.alistapart.com/articles/hybrid/
in order to create a very simple navigation with a horizontal main bar
containing categories, and a sub-categories list that is displayed when a category is hovered on.

Really straight forward so far. The problem is I cant get the sub-categories to float under the main ones, and instead they shift the main categories to the left when they are shown.
here is my css code:

#nav li {
  /*float the main list items*/ 
  float: left;
  display: block;
  padding-right: 5px;
}

#nav li.off ul, #nav li.on ul {
  /*put the subnavs below and hide them all*/
  display: none;
   height: 60px;
}

#nav li.on ul {
  /*display active subnav list*/
  display: block;

}

#nav li.on ul a, #nav li.off ul a {
 
  /*ie doesn't inherit the float*/
  border: 0;
  width: auto;

}

#nav li.off:hover ul {
  /*  display the other topics when
      their parent is hovered */
  display: block;
  z-index: 6000;
}

Code (markup):

and here is my html:

 <span style="float: left">Categories:&nbsp;&nbsp;  </span>
            <ul id="nav">
                        <li class="off">
                                 "Music"
                                <ul>
                                       
                                        <li>all</li>
                                        <li>"Electronic"</li>
                                </ul>
                        </li>
   
                       <li class="off">
                                "PC Games"
                             </li>
                             <li class="off">
                                "Xbox 360"
                             </li>
                  </ul>
      

HTML:

This is not how it's really stylized at my end, but the problem is the same and this is the most basic css involoved. I have tried using position: relative on the elements but it doesn't work - only absolute positioning gets over the problem and I can't use it for various reasons.
Any ideas would be much appreciated!

Ehud