catonthecouchproductions
asked on
Trouble with jQuery dropdown - nested lists
I am trying to work on a jquery dropdown like the image attached. I am working on having the items below the word "Dog" each have a two col dropdown. Its not the CSS I cant get, its the logic of the menu.
I have an example of the XHTML markup below. That is the one for Dogs -> Foods.
Would the jQuery look something like this: (a member here, helped me out and to understanding this, great help.)
http://pastie.org/668214
I guess I am really just having trouble with the selector to make it dynamic among the pattern.
Thank you,
Ryan
I have an example of the XHTML markup below. That is the one for Dogs -> Foods.
Would the jQuery look something like this: (a member here, helped me out and to understanding this, great help.)
http://pastie.org/668214
I guess I am really just having trouble with the selector to make it dynamic among the pattern.
Thank you,
Ryan
<h4 class="top-nav-heading">DOG</h4>
<ul>
<li><a href="<% Request.ApplicationPath %>/category/dog/foods/" class="main-heading-main main-menu">Foods</a>
<ul class="sub-drop grid_2">
<li class="drop-title">Dog Food</li>
<li><a href="<% Request.ApplicationPath %>/category/dog/food/all-natural/">All Natural</a></li>
<li><a href="<% Request.ApplicationPath %>/category/dog/food/canned-dog-food/">Canned Dog Food</a></li>
<li><a href="<% Request.ApplicationPath %>/category/dog/food/dry-dog-food/">Dry Dog Food</a></li>
<li><a href="<% Request.ApplicationPath %>/category/dog/food/grain-free/">Grain Free</a></li>
<li><a href="<% Request.ApplicationPath %>/category/dog/food/organic/">Organic</a></li>
<li><a href="<% Request.ApplicationPath %>/category/dog/food/overweight/">Overweight</a></li>
<li><a href="<% Request.ApplicationPath %>/category/dog/food/puppy/">Puppy</a></li>
<li><a href="<% Request.ApplicationPath %>/category/dog/food/senior/">Senior</a></li>
<li><a href="<% Request.ApplicationPath %>/category/dog/food/veterinary-diets/">Veterinary Diets</a></li>
<li><a href="<% Request.ApplicationPath %>/category/dog/food/frozen-and-raw/">Frozen & Raw</a></li>
<li><a href="#" class="view-more">More...</a></li>
</ul>
<ul class="sub-drop grid_2">
<li><a href="<% Request.ApplicationPath %>/category/dog/brand/">All Natural</a></li>
<li><a href="<% Request.ApplicationPath %>/category/dog/brand/">Canned Dog Food</a></li>
<li><a href="<% Request.ApplicationPath %>/category/dog/brand/">Dry Dog Food</a></li>
<li><a href="<% Request.ApplicationPath %>/category/dog/brand/">Grain Free</a></li>
<li><a href="<% Request.ApplicationPath %>/category/dog/brand/">Organic</a></li>
<li><a href="<% Request.ApplicationPath %>/category/dog/brand/">Overweight</a></li>
<li><a href="<% Request.ApplicationPath %>/category/dog/brand/">Puppy</a></li>
<li><a href="<% Request.ApplicationPath %>/category/dog/brand/">Senior</a></li>
<li><a href="<% Request.ApplicationPath %>/category/dog/brand/">Veterinary Diets</a></li>
<li><a href="<% Request.ApplicationPath %>/category/dog/brand/">Frozen & Raw</a></li>
<li><a href="<% Request.ApplicationPath %>/category/dog/brand/" class="view-more">Shop By Brand</a></li>
</ul>
</li>
<li><a href="<% Request.ApplicationPath %>/category/dog/toys/" class="main-heading-main">Toys</a></li>
<li class="last"><a href="<% Request.ApplicationPath %>/category/dog/treats-and-more/" class="main-heading-main">Treats & More</a></li>
<li class="last arrow"><a href="#" class="drop-down"><img src="images/dropdown-arrow.png" width="15" height="14" alt="Dropdown Arrow" class="main-heading-arrow" /></a></li>
</ul>
Screen-shot-2009-10-24-at-3.26.5.png
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.