Second level submenu CSS - css

Question

I was hoping if you can help me with my little problem. I am just updating one of my developers style sheets. I am a beginner in CSS so I am having difficulties adding the second level submenu in it.
Here's the link DEMO PAGE
This is my HTML
<div id="sidebar"><i class="icon icon-home"> </i>Dashboard<ul style="display: block;">
<li class="active"><i class="icon icon-home"></i> <span>Dashboard</span> </li>
<li> <i class="icon icon-signal"></i> <span>Charts & graphs</span> </li>
<li><i class="icon icon-th"></i> <span>Tables</span></li>
<li><i class="icon icon-fullscreen"></i> <span>Full width</span></li>
<li class="submenu"> <i class="icon icon-th-list"></i> <span>API</span> <span class="label label-important">4</span>
<ul>
<li>
boom
<ul>
</ul>
</li>
<li>% of National Roads Paved</li>
<li>Process</li>
<li>Regional Profiles</li>
</ul>
</li>
</ul>
</div>
and this is my CSS
/* Top user navigation */
#sidebar{ width:100%; background:#252125; position:absolute; clear:both; top:62px;}
#sidebar > ul{ margin:0px; padding:0px; width:100%; display:block; z-index:999;}
/*Border right sidebar */
#sidebar > ul > li { list-style-type:none; float:left; display:block; margin:0px; border-right:1px solid #464652; position:relative; padding:10px; cursor:pointer}
/*Border right */
#sidebar > ul > li a{ padding:12px 0;}
#sidebar > ul > li:hover ul { display:block;}
/*#sidebar > ul > li:hover { background-color:#41bedd;} */
/*On hover menu */
#sidebar > ul > li:hover { background-color:#464652;}
/*On hover menu */
#sidebar > ul > li:hover a{ background:none;}
/*Modules color */
#sidebar > ul li ul { margin:0px; padding:0px; display:none; z-index:999; position:absolute; left:0px; top:40px; background:#464652; min-width:200px;}
/*Modules color */
#sidebar > ul li ul li { list-style-type:none; margin:0px; font-size:12px;line-height:30px; }
#sidebar > ul li ul li a { display:block; padding:5px 10px; color:#fff; text-decoration:none; font-weight:bold; }
/*Modules color on hover */
#sidebar > ul li ul li:hover a{ background-color:#5A5A69;}
/*Modules color on hover*/
#sidebar > ul li span { cursor:pointer; margin:0px 2px 0 5px; font-weight:bold; color:#fff; font-size:11px; }
#sidebar > ul li a i{ background-image: url("../img/glyphicons-halflings-white.png"); margin-top:4px; vertical-align: top;}
I know this post has been posted from different threads. I really cant understand them. Hope you understand. Thanks in advance.

Answer 1

First of all, in your sample HTML, you don't have any lis in your tertiary level. Put some in there.
As for your CSS, it's presently set up to handle the showing and hiding of UL's below the top level one on hover. We need to get more specific so that it excludes the 3rd level--as well as then get more specific to and add a second level hover style.
Where you have this:
#sidebar > ul > li:hover ul { display:block;}
Change it to this:
#sidebar > ul > li:hover > ul { display:block;}
The first will show ALL child ULs of the LI on hover. The latter will show only the direct child of the LI on hover.
Now we need to add a trigger for the 3rd level:
#sidebar > ul > li > ul > li:hover > ul { display:block; top: 0; left: 200px}
While we're at it, we included a new set of positioning so that it appears to the right of the current hover rather than below (which would cover up the second level navigation.
Working example: http://jsfiddle.net/wS9t3/