<div id="toqga">
<ul>
<li><a href="#1">qkatoqga</a>
<div>
<ul>
<li><a href="#">megatoqga</a></li>
<li><a href="#">megatoqga</a></li>
<li><a href="#">megatoqga</a></li>
</ul>
</div>
</li>
<li><a href="#2">qkatoqga</a>
<div>
<ul>
<li><a href="#">megatoqga</a></li>
<li><a href="#">megatoqga</a></li>
<li><a href="#">megatoqga</a></li>
</ul>
</div>
<li><a href="#3">qkatoqga</a>
<div>
<ul>
<li><a href="#">megatoqga</a></li>
<li><a href="#">megatoqga</a></li>
<li><a href="#">megatoqga</a></li>
</ul>
</div>
</li>
<li><a href="#4">qkatoqga</a>
<div>
<ul>
<li><a href="#">megatoqga</a></li>
<li><a href="#">megatoqga</a></li>
<li><a href="#">megatoqga</a></li>
</ul>
</div>
</li>
<li><a href="#5">qkatoqga</a>
<div>
<ul>
<li><a href="#">megatoqga</a></li>
<li><a href="#">megatoqga</a></li>
<li><a href="#">megatoqga</a></li>
</ul>
</div>
</li>
</ul>
</div>
#toqga a {
font-size: 11px;
font-weight: bold;
color: #3879C9;
}
#toqga ul ul li{
display:none;
}
#toqga li:hover ul li{
color: #FF7F55;
display:list-item;
}
<!--------------------------------- HTML Menu ------------------------------------------------------------------------------->
<ul id="togga">
<li><a href="#">megatogga</a></li>
<li><a class="fly" href="#">Tutorials</a>
<ul class="dd">
<li><a href="#">HTML / CSS</a></li>
<li><a class="fly" href="#">JS / jQuery</a>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">JS</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</li>
<li><a class="fly" href="#">megatogga</a>
<ul class="dd">
<li><a class="fly" href="#">By category</a>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a class="fly" href="#">Menu1</a>
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a class="fly" href="#">Menu3</a>
<ul>
<li><a href="#">Menu31</a></li>
<li><a href="#">Menu32</a></li>
<li><a href="#">Menu33</a></li>
<li><a href="#">Menu34</a></li>
</ul>
</li>
<li><a href="#">Menu4</a></li>
</ul>
</li>
<li><a href="#">Ajax</a></li>
</ul>
</li>
<li><a class="fly" href="#">By tag name</a>
<ul>
<li><a href="#">captcha</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">animation</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Go Back To The Tutorial</a></li>
</ul>
<!------------------------------------------ END HTML Menu --------------------------------------------------->
<!------------------------------------------ CSS Style Menu ----------------------------------------------------->
/* styles */
body {
background:#ffffff;
margin:0;
padding:0;
}
.example {
width:770px;
height:570px;
border:1px #000 solid;
margin:20px auto;
padding:15px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
/* main menu styles */
#togga,#togga ul {
/*background-image:url(../images/tr75.png);*/
list-style:none;
margin:0;
padding:0;
}
#togga {
height:41px;
padding-left:5px;
padding-top:5px;
position:relative;
z-index:2;
}
#togga ul {
left:-9999px;
position:absolute;
top:37px;
width:auto;
}
#togga ul ul {
left:-9999px;
position:absolute;
top:0;
width:auto;
}
#togga li {
float:left;
margin-right:5px;
position:relative;
}
#togga li a {
background:#c1c1bf;
color:#000;
display:block;
float:left;
font-size:16px;
padding:8px 10px;
text-decoration:none;
}
#togga > li > a {
-moz-border-radius:6px;
-webkit-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;
overflow:hidden;
}
#togga li a.fly {
background:#c1c1bf url(../images/arrow.gif) no-repeat right center;
padding-right:15px;
}
#togga ul li {
margin:0;
}
#togga ul li a {
width:120px;
}
#togga ul li a.fly {
padding-right:10px;
}
/*hover styles*/
#togga li:hover > a {
background-color:#858180;
color:#fff;
}
/*focus styles
#togga li a:focus {
outline-width:0;
}*/
/*popups*/
#togga li a:active + ul.dd,#togga li a:focus + ul.dd,#togga li ul.dd:hover {
left:0;
}
#togga ul.dd li a:active + ul,#togga ul.dd li a:focus + ul,#togga ul.dd li ul:hover {
left:140px;
}
<!------------------------------------------ END CSS Style Menu ----------------------------------------------------->
function togga() {
var timeout = 500;
var closetimer = 0;
var toggaitem = 0;
function togga_open(e)
{
togga_close();
var submenu = $(this).find('ul');
if(submenu){
toggaitem = submenu.css('visibility', 'visible');
}
$(document).bind('click',togga_close); //add bind
//event.stopPropagation();
return false; //stop propagation
}
function togga_close()
{
if(toggaitem) toggaitem.css('visibility', 'hidden');
$(document).unbind('click',togga_close); //remove bind
}
function togga_timer()
{ closetimer = window.setTimeout(togga_close, timeout); }
function togga_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{
$('#togga > li').bind('click', togga_open);
$('#togga li ul').bind('click', togga_timer);
});
}
togga();