horizontal navigation bar using realitve position <li>

[ehudros]

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:

Code: Select all

#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;
}

and here is my html:

HTML: Select all

 <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>
      

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

[Lchad]

You are correct, the only way to get the sublinks to align below is to use absolute positioning.
If you set that entire navigation in a div that is aligned without any type of relative or absolute positioning, the rest of the design should be fine.

Here is your css:

Code: Select all

#container {
 /*set this to whatever you need*/
 width: 700 px;
 margin: 0 auto;
 }
 
#nav li {
  /*float the main list items*/ 
  margin: 0;
  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.off ul, #nav li.on ul  {
 
  /*ie doesn't inherit the float*/
  display: none;
  position: absolute;
  top:65px;
  height: 15px;
  left: 0;
  padding-top: 10px;
  
  
}

html

Code: Select all

<div id="container>
<h1>Categories</h1>
            <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></div>