Making unlimited dropdown menu set this code into template

// to make a unlimited dropdown menu first set the below code into your template

<script type="text/javascript">
jQuery(function($) {
  if ($.browser.msie && $.browser.version.substr(0,1)<7)
  {
	$('li').has('ul').mouseover(function(){
		$(this).children('ul').css('visibility','visible');
		}).mouseout(function(){
		$(this).children('ul').css('visibility','hidden');
		})
  }
});
</script>
<style type="text/css">
#menu ul {
	margin: 20px 0 0 0;
	_margin: 0; /*IE6 only*/
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 38px;
	left: 0;
	z-index: 1;
	transition: all .2s ease-in-out;
}

#menu li:hover > ul {
	opacity: 1;
	visibility: visible;
	margin: 0;
}

#menu ul ul {
	top: 0;
	left: 150px;
	margin: 0 0 0 20px;
	_margin: 0; /*IE6 only*/
}





#menu ul li ul {
				display: none;
				position: absolute;
				top: 29px;
				left: 0px;
				width: 150px;
				border: 1px solid #ccc;
				background: white;
				padding: 10px 0 0 0;
				}



#menu ul li ul li ul{
background: white none repeat scroll 0 0;
border: 1px solid #ccc;
display: none;
left: 150px;
padding: 5px 0 0;
position: absolute;
top: -6px;
width: 150px;
}

#menu ul li ul li:hover ul{display: block;}


#menu ul li ul li ul li ul{
background: white none repeat scroll 0 0;
border: 1px solid #ccc;
display: none;
left: 150px;
padding: 5px 0 0;
position: absolute;
top: -6px;
width: 150px;
}

#menu ul li ul li ul li :hover ul{display: block;}

</style>