Menu dropdown desplegable para blogger

¡Aqui os dejo un tutorial para hacer un menu desplegable para tu Blog! Para todos los sepais algo de HTML/CSS os resultara bastante facil seguir los pasos y modificar el codigo a vuestro gusto!! Los demas.... a aprender xD

<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(300);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function(){
mainmenu();
});
</script>

<style type="text/css">

#nav{
padding: 0;
list-style-type:none;
list-style-position:outside;
position:relative;
width: 720px;
overflow: visible;
}

#nav a{
display:block;
text-decoration:none;
overflow: visible;
}

#nav li{
float:left;
position:relative;
min-width: 40px;
overflow: visible;
}

#nav li li{
overflow: visible;
}

#nav li .doble{
height: 30px;
overflow: visible;
}

#nav ul {
margin:0;
padding:0;
position:absolute;
width: 150px;
height: 30px;
list-style-type:none;
z-index:30;
overflow: visible;
visibility: hidden;
}

#nav li ul a{
min-width: 150px;
float:left;
height: 30px;
overflow: visible;
}

#nav ul ul{
height: 30px;
overflow: visible;
}

#nav li ul ul {
margin-left: 185px;
height: 30px;
margin-top: -1px;
}

#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;
}

#menu{
margin: 0 auto;
}
</style>



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