[Resolvido] Como faz menu com submenu dentro de submenu?

Boa tarde para todos!

Estou com um código css de um menu com submenu! Mas quero que ao passar o mouse em cima do submenu abra outro submenu!

Então, não sei quais códigos usar pra abrir o segundo submenus dentro do outro!

Por favor, se puderem me ajudar, Postem aqui o código correto??

Desde já agradeço a todos!

Segue o código que eu usei:

*{margin:0; padding:0;}

body{

 font:10pt Verdana, Arial, Helvetica, sans-serif;
}

ul{

 list-style-type:none;
}

ul#menuh{

 width:868px;
margin:0 auto;
}

ul#menuh li{

 position:relative;
float:left;
height: 28px;
}

ul#menuh li a{

 display:block;
float:left;
padding:0 15px 27px;
height:20px;
line-height:28px;

/ background:#ffff99; /

color:#808080;
text-decoration:none;
font-weight: bold;
}

ul#menuh li a:hover{

 background:#D7FFD7;
	color:#000080;
	font-weight: bold;
	height: 1px;
}

ul#menuh li ul{

 display:none;
	position:absolute;
	top:20px;
	left:0px;
	background-color: #BBFFBB;
	width: 200px;
}

ul#menuh li:hover ul,
ul#menuh li.hover ul{

 display:block;
}

ul#menuh li ul a{

 clear:both;
}

ul#menuh li ul li{

 float:none;
	clear:both;
}

ul#menuh li ul li a{float:none;}

#menuh li:hover ul ul, li.over ul ul {

display:none;
position:absolute;
left:224px;
top: 0px;
width:200px;
}

#menuh li:hover ul, li li:hover ul, li.over ul,
li li.over ul {

display: block;
position: absolute;
width:200px;
margin-top: 8px;

} / Aqui a magica /

Eu uso esse código em jQuery pra funcionar os submenus:

$(function(){
 $("#menu a").mouseover(function(){
 var menu = $(this).parent().children('.submenu');
 var submenu = $(this).parent().parent();

 if(menu.length > 0 && menu.is(':hidden')){
 $("#menu a").removeClass('ativo');
 $(this).addClass('ativo');
 $('.submenu').slideUp();
 menu.slideDown();
 }
 if(!submenu.hasClass('submenu') && menu.length == 0){
 $("#menu a").removeClass('ativo');
 $(this).addClass('ativo');

 $('.submenu').slideUp();
 }

 });
});

Uso tbm essa biblioteca:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

E o código html é:

<ul id="menuh">
 <li><a href="#">Home</a></li>
 <li><a href="#">Serviços</a>
 <ul class="submenu">
 <li><a href="#">Serv 1</a></li>
 <li><a href="#">Serv 2</a></li>
 <li><a href="#">Serv 2</a></li>
 </ul>

 </li>
 <li><a href="#">Produtos</a>
 <ul class="submenu">
 <li><a href="#">Prod 2</a></li>
 <li><a href="#">Prod 2</a></li>
 <li><a href="#">Prod 2</a>
 <ul class="submenu">
 <li><a href="#">Prod 3</a></li>
 <li><a href="#">Prod 3</a></li>
 <li><a href="#">Prod 3</a></li>
 </ul>
 </li>
 </ul>

 </li>
 <li><a href="#">Cliente</a></li>
 <li><a href="#">Contato</a></li>
 </ul>

Só que tem um tipo de bug, não sei como arrumar! Quando passa o nome na parte vázia do link buga e muda pro link ao lado direito! Isso é algum erro no código css, jQuery ou na fonte da biblioteca?

Desde já agradeço!

Att