Skip navigation
Currently Being Moderated

Multiple/nested levels in CSS horizontal drop menu

Mar 31, 2013 5:52 PM

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

 
Replies
  • Currently Being Moderated
    Apr 1, 2013 1:00 AM   in reply to BcSurvivor08

    Hi,

     

    I get a 404 error when I try to access the menu.css URL. Can you verify your link.

     

    Meanwhile, give a shot at the tutorial on this page Creating a navigation menu

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 1, 2013 2:28 AM   in reply to BcSurvivor08

    The code that you have shown is correct for the following outcome

    _Capture.jpg

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 1, 2013 5:37 PM   in reply to BcSurvivor08
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <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>
    </ul>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>
     
    |
    Mark as:
  • Currently Being Moderated
    Apr 1, 2013 10:12 PM   in reply to BcSurvivor08

    In SpryMenuBar.css

     

    1. Change background-color: to background:

    2. Remove lines 144-178

     

    If you want a down-arrow use &#x25BC as in

     

    <li><a class="MenuBarItemSubmenu" href="#">Item 1 &#x25BC</a>

     

     

    PS Left arrow = &#x25B6;

     

    Message was edited by: Ben Pleysier

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 3, 2013 3:46 AM   in reply to BcSurvivor08

    Hello BcSurvivor08...i am not a coding expert...i would recommend you AllWebMenus http://www.likno.com/allwebmenusinfo.html to create your menu...You can do everything you need without code...only by interface...and also it has no cross browser issues.

    Hope it helps you this way.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points