?
Solved

Dropdown Menus using Multilevel UL LI

Posted on 2008-11-16
2
Medium Priority
?
892 Views
Last Modified: 2012-06-27
Hi,

Please find the code.

<html>
      <head>
            <style>
                  ul {
                        margin: 0;
                        padding: 0;
                        list-style: none;
                  }
                  ul li {
                        position: relative;
                        float: left;
                      width: 500px;
                  }
                  li ul {
                        position: absolute;
                        top: 30px;
                        display: none;
                  }
                  ul li a {
                        display: block;
                        text-decoration: none;
                        line-height: 20px;
                        color: #000;
                        padding: 5px;
                        background: #CC0;
                        margin: 0 2px;
                  }

                  ul li ul {
                        position: relative;
                        float: left;
                      width: 500px;
                        display: none;
                  }

                  ul li ul a {
                        display: block;
                        text-decoration: none;
                        line-height: 20px;
                        color: #000;
                        padding: 5px;
                        background: #CC0;
                        margin: 0 2px;
                  }
                  
                  
                  ul li a:hover { background: #66F; }
                  li:hover ul, li.over ul { display: block; }            
            </style>
            <script language="javascript">
                  startList = function() {
                  if (document.all&&document.getElementById) {
                  navRoot = document.getElementById("nav");
                  for (i=0; i<navRoot.childNodes.length; i++) {
                  node = navRoot.childNodes[i];
                  if (node.nodeName=="LI") {
                  node.onmouseover=function() {
                  this.className+=" over";
                    }
                    node.onmouseout=function() {
                    this.className=this.className.replace(" over", "");
                     }
                     }
                    }
                   }
                  }
                  window.onload=startList;            
            </script>
      </head>
<body>
<ul id="nav" class="categoryfilter">
          <li>
            <a href="javascript:callCategory('^6','Passives')">Passives (214960)</a>
            <ul>
              <li>
                <a href="javascript:callCategory('^6/12','Capacitors')">Capacitors (214443)</a>
                <ul>
                  <li>
                    <a href="javascript:callCategory('^6/12/173','Ceramic - Multilayer')">Ceramic  -  Multilayer (164498)</a>
                  </li>
                  <li>
                    <a href="javascript:callCategory('^6/12/220','Plastic Film')">Plastic Film(21831)</a>
                  </li>
                  <li>
                    <a href="javascript:callCategory('^6/12/160','Tantalum - Solid')">Tantalum - Solid (14250)</a>
                  </li>
                  <li>
                    <a href="javascript:callCategory('^6/12/46','Ceramic - Single Layer')">Ceramic -Single Layer (5391)</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="javascript:callCategory('^6/11','Resistors')">Resistors (376)</a>
                <ul>
                  <li>
                    <a href="javascript:callCategory('^6/11/162','Fixed - Single')">Fixed - Single (363)</a>
                  </li>
                  <li>
                    <a href="javascript:callCategory('^6/11/174','Fixed - Networks/Arrays')">Fixed - Networks/Arrays(9)</a>
                  </li>
                  <li>
                    <a href="javascript:callCategory('^6/11/1','Trimmers/Pots/Rheostats')">Trimmers/Pots/Rheostats (4)</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="javascript:callCategory('^6/15','Magnetics - Inductors')">Magnetics - Inductors (114)</a>
                <ul>
                  <li>
                    <a href="javascript:callCategory('^6/15/5','Surface Mount')">Surface Mount (113)</a>
                  </li>
                  <li>
                    <a href="javascript:callCategory('^6/15/6','Leaded')">Leaded(1)</a>
                  </li>
                </ul>
              </li>
             </ul>
          </li>
        </ul>
</body></html>




From the above code what i wanted is...

When some one moves above Passives (214960)

I need to have a drop down for (Capacitors (214443), Resistors (376), Magnetics - Inductors (114))

and when some one moves above Capacitors (214443) I need to show another dropdown (Ceramic  -  Multilayer (164498), Plastic Film(21831),Tantalum - Solid (14250),Ceramic -Single Layer (5391))

Not sure how we can associate UL LI A, and Hide them and show it back.

Any help is appreciated.

Regards,G.
0
Comment
Question by:gcmachel
1 Comment
 
LVL 50

Accepted Solution

by:
dbrunton earned 2000 total points
ID: 22972449
Try here for a sample menu that might do what you want to do.

http://www.howtocreate.co.uk/tutorials/testMenu.html

Scroll down for the sample code.



A wider range of menus can be found here

http://www.cssplay.co.uk/menus/
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question