Créer un menu déroulant avec JQuery

<ul id="nav">
  <li>
    <a href="#">Menu 1</a>
    <div>
      <ul>
        <li><a href="#">Sous Menu 1-1</a></li>
        <li><a href="#">Sous Menu 1-2</a></li>
      </ul>
    </div>
  </li>
  <li>
    <a href="#">Menu 2</a>
    <div>
      <ul>
        <li><a href="#">Sous Menu 2-1</a></li>
        <li><a href="#">Sous Menu 2-2</a></li>
      </ul>
    </div>
  </li>
</ul>

ul#nav {
	display:inline;
	float:left;
}
ul#nav li {
	float:left;
	list-style-type:none;
	margin:0 10px;
	position:relative;
}
ul#nav div {
	display:none;
	float:left;
	position:absolute;
}
ul#nav li ul {
	margin:0;
	padding:0;
}
ul#nav li ul li {
	margin:0px;
	width:150px;
}

$(document).ready(function() {
	$("#nav > li").mouseover(function(e) {
		$(this).children("div").show();
	});
	$("#nav > li").mouseout(function(e) {
		$(this).children("div").hide();
	});
});