Menu dropdown desplegable para todas las plantillas

Como muchos me habeis pedido un menu desplegable para vuestra plantilla he decidido hacer uno para todas las plantillas ;)

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

<script type="text/javascript">
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(500);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function(){
mainmenu();
});
</script>

<style type="text/css">
/**** CODIGO DEL COLOR *****/
#menu a, #menu li, #menu li li{
background-color:  blue;
}

#menu a:hover, #menu li:hover, #menu li li:hover{
background-color: aqua;
text-decoration: underline;
}
/****** FIN ********/

#nav{
padding: 0;
list-style-type:none;
list-style-position:outside;
overflow: visible;
}
#nav a{
display: block;
overflow: visible;
border: none 0px;
}

#menu{
height: 50px;
border: none 0px;
}

#menu ul {
margin: 0;
list-style: none;
float: left;
}

#menu li.parent {
position: relative;
margin-left: 5px;
display: block;
float: left;
z-index: 3;
width: auto;
list-style: none;
border: none 0px;
}

#menu li {
position: relative;
margin: 0;
z-index: 3;
width: auto;
border: none 0px;
}

#nav ul {
position: absolute;
top: 26px;
left 0px;
z-index: 33;
width: 150px;
visibility: hidden;
border: none 0px;
overflow: visible;
list-style-type:none;
}

#nav ul ul
{
left: 148px;
top: 0px;
width: 150px;
border: none 0px;
overflow: visible;
}

.ul-child li a{
margin: 0px;
padding:0;
z-index: 2;
position: relative;
display: block;
width: 100%;
border: none 0px;
}

.ul-child li{
margin: 0px;
padding: 0px;
border: none 0px;
}

#menu li a{
text-decoration: none;
border: none 0px;
padding: 5px 10px;
}

#menu li.list{
border: none 0px;
width: 150px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}

.tabs-outer
{
overflow: visible;
}
</style>

<div id="menu">
<ul id="nav">
<li class="parent"><a href="#">MENU-1</a></li>
<li class="parent"><a href="#">MENU-2</a>
<ul>
<li class="list"><a href="#">SUBMENU-1</a>
<ul>
<li class="list"><a href="#">SUBMENU-2</a></li>
<li class="list"><a href="#">SUBMENU-2.2</a></li>
<li class="list"><a href="#">SUBMENU-2.3</a></li>
</ul>
</li>
<li class="list"><a href="#">SUBMENU-1.2</a></li>
<li class="list"><a href="#">SUBMENU-1.3</a></li>
</ul>
</li>
<li class="parent"><a href="#">MENU-3</a>
<ul>
<li class="list"><a href="#">SUBMENU-3</a>
<ul>
<li class="list"><a href="#">SUBMENU-3</a></li>
<li class="list"><a href="#">SUBMENU-3.2</a></li>
<li class="list"><a href="#">SUBMENU-3.3</a></li>
</ul>
</li>
</ul>
</li>
<li class="parent"><a href="#">MENU-4</a></li>
</ul>
</div>