asked on

Dropdown Menus using Multilevel UL LI

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.

ASKER CERTIFIED SOLUTION

dbrunton

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial