10 Replies Latest reply: Apr 3, 2013 4:23 PM by BcSurvivor08 RSS

    Multiple/nested levels in CSS horizontal drop menu

    BcSurvivor08 Community Member

      I am working on updating my horizontal menu and I need to have a nested menu inside the dropdown to display to the right of its parent menu.

       

      Example:

       

      <ul id="navbar">

      <li><a href="#">Paper &amp; Printing &#9660;</a>

      <ul>

      <li><a href="paper.html">Copy &amp; Printer Paper</a>

             <ul>

                  <li><a href="letter">Letter</a></li>

                  <li><a href="legal">Legal</a></li>

                  <li><a href="ledger">Ledger</a></li>

                  <li><a href="computer">Computer</a></li>

                  </ul>

       

      </li>

      <li><a href="pads.html">Tablets &amp; Notebooks</a></li>

      <li><a href="art.html">Art Paper &amp; Supply</a></li>

      <li><a href="printaccess.html">Ink &amp; Toner</a></li>

      </ul>

      </li>

       

       

      I want the types of paper (i.e. letter, legal, ledger...) to pop out to the right of the parent "Paper & Printing"  -> "Copy & Printer Paper"  .  I know I'm lacking the css for #navbar ul li ul li and so on, but everything I have tried doesnt work.

       

      Here is the css I have so far:

       

      http://www.liquidatorswarehouse.net/css/menu.css

       

      Thanks for any help