Adding a 3rd sub menu

Question

I like to add a third sub menu there is only 2 sub menus . . .but i am bit confused . . .please help me with it guys. . My html and css code are in the link below in JS fiddle http://jsfiddle.net/xZKE8/

What I Have now is

Ex: ProductA > Product 1 >Sub product 1

What I need is

Ex: ProductA > Product 1 >Sub product 1 >Sub product 1_1

<div id="menuwrapper">
<ul>
 <li><a href="#" Title="Products A" >Products A</a>
<ul>
 <li><a href="#" Title="Product 1">Product 1</a>
<ul>
 <li><a href="#" Title="Sub Product 1">Sub Product 1</a></li>
 <li><a href="#" Title="Sub Product 2">Sub Product 2</a></li>
 <li><a href="#" Title="Sub Product 3">Sub Product 3</a></li>
 <li><a href="#" Title="Sub Product 4">Sub Product 4</a></li>
 <li><a href="#" Title="Sub Product 5">Sub Product 5</a></li>
</ul>   
 </li>
</ul>   
 </li>
</ul>
</div>

Exploring · Accepted Answer · 2013-11-26 17:02:56Z

1

Add another ul inside the <li><a href="#" Title="Sub Product 1">Sub Product 1</a></li> and add as many li as you want then style it with id #menuwrapper ul ul ul ul or you can style like this #menuwrapper ul:nth-child(3) and I think it will work. If can't then tell.

I have updated your fiddle. Please check it: http://jsfiddle.net/xZKE8/4/ . I have added just two line CSS with yours'.

#menuwrapper ul li ul li ul li ul li{display:none;}
#menuwrapper ul li ul li ul li:hover > ul li{display:block !important;}

edited Nov 26, 2013 at 17:02

answered Nov 26, 2013 at 16:42

Exploring

5732 gold badges6 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zain Over a year ago

Ya Joy. . .the prob is with my styling. . .can u edit the fiddle and show me

sn3ll · Accepted Answer · 2013-12-06 13:57:21Z

1

As Joy_S stated, you just nest as many <ul>'s as you need.

As for the CSS, the original code goes about showing the hidden sub levels in an inefficient way. Rather that using #menuwrapper ul li ul li ul li ul ... blah blah blah for every single submenu, just use one selector for every li to unhide ONLY is direct child ul using >.

 #menuwrapper ul li:hover > ul, 
 #menuwrapper ul li.iehover > ul{
     left:175px;
     top:0px;
     display:block;
 }

This one block will work on every menu item for any number of submenus.

fiddle

I go rid of all the superfluous CSS to show what is unnecessary to make this type of menu function.

edited Dec 6, 2013 at 13:57

answered Nov 26, 2013 at 16:58

sn3ll

1,6851 gold badge11 silver badges17 bronze badges

Collectives™ on Stack Overflow

Adding a 3rd sub menu

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related