Question

I cant seem to get the css positioning right so that a new line drops with links when a user hovers over a category with sub categories.

I was wondering how can I accomplish this?

I have many sub sub categories about six levels deep just to let you know.

Here is my CSS.

#nav-container {
    border-top: 2px solid #000000;
    float: left;
    font-weight: bold;
    margin: 0;
    padding: 5px 0px;
    width: 100%;    
    background: #0098ff;
    list-style-type: none;
}

#nav-container ol {
    list-style-type: none;
    margin: 0 auto;
    padding: 0px;
    text-align: left;
    width: 1024px;
}

#nav-container li {
    float: left;
    margin: 0px;
    padding: 0px;
    width: auto;
}

#nav-container ol h2 {
    font-size: .9em;
    margin: 0px;
    width: 236px;
    float: left;
}

ul.cat-container li {
    display:  none;
}

ul.cat-container > li {
    display: list-item;
}

ul.cat-container li:hover > ol > li {
    display: list-item;
}

ul.cat-container ol {
    list-style-type: none;
    margin: 0 auto;
    padding: 0px;
    text-align: left;
    width: 1024px;
    position: absolute;
    left: 0;
    top: 440;   
}

ul.cat-container ol li {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 246px;   
}

And here is my HTML.

  <div id="nav-container">
    <ol>
      <li>
        <ul class="cat-container">
          <li class="cat-header">
            <h2><a href="#"class="header">First Nested List</a></h2>
            <ol>
              <li><a href="#">Second Nested List</a></li>
              <li><a href="#">Second Nested List</a></li>
            </ol>
          </li>
          <li class="cat-header">
            <h2><a href="#" class="header">First Nested List</a></h2>
            <ol>
              <li><a href="#">Second Nested List</a></li>
              <li><a href="#">Second Nested List</a></li>
            </ol>
          </li>
          <li class="cat-header">
            <h2><a href="#" class="header">First Nested List</a></h2>
            <ol>
              <li><a href="#">Second Nested List</a></li>
              <li><a href="#">Second Nested List</a>
                <ol>
                  <li><a href="#">Third Nested List</a></li>
                  <li><a href="#">Third Nested List</a>
                    <ol>
                      <li><a href="#">Fourth Nested List</a></li>
                      <li><a href="#">Fourth Nested List</a></li>
                    </ol>
                  </li>
                  <li><a href="#">Third Nested List</a>
                    <ol>
                      <li><a href="#">Fourth Nested List</a>
                        <ol>
                          <li><a href="#">Fifth Nested List</a></li>
                          <li><a href="#">Fifth Nested List</a></li>
                        </ol>
                      </li>
                      <li><a href="#">Fourth Nested List</a></li>
                    </ol>
                  </li>
                  <li><a href="#">Third Nested List</a></li>
                </ol>
              </li>
              <li><a href="#">Second Nested List</a></li>
            </ol>
          </li>
        </ul>
      </li>
    </ol>
  </div>

Answer 1

Normally this is done with JavaSript or jQuery, by changing the visibility when the user hovers over the submenu.

A pure CSS solution is tricky and requires the hover psuedo-class, but this page walks you through how to do it.