Link to home
Start Free TrialLog in
Avatar of catonthecouchproductions
catonthecouchproductionsFlag for United States of America

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
<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 &amp; 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 &amp; 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 &amp; 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>

Open in new window

Screen-shot-2009-10-24-at-3.26.5.png
ASKER CERTIFIED SOLUTION
Avatar of DanDauchy
DanDauchy
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial