jQuery SlideDown Submenu Top Margin

Question

I have the following code for slide down menu:

jQuery(window).ready(function(){
    jQuery('.menu>li').hover(function(){
        jQuery(this).find('ul').first().stop(true,true).slideDown(400);
    }, 
    function(){
        jQuery(this).find('ul').first().stop(true,true).slideUp();
    });

    jQuery('.menu>li>ul>li').hover(function(){
        jQuery(this).find('ul').first().stop(true,true).slideDown(400);
    }, 
    function(){
        jQuery(this).find('ul').first().stop(true,true).slideUp();
    });
});

It works swimmingly, except when .menu ul ul is displayed, it slides down one level down from its parent item, so one cannot hover over it. I fixed that using a negative margin-top for .menu ul ul, but that way the slideDown function looks like it is sliding from mid-way to top and bottom, rather than from top to down. Any suggestions on how to put a permanent fix on this either through jQuery or CSS?

Here's the CSS file:

.menu {
         padding:0;
         margin: 0;
}

.menu ul{
         list-style: none;
         margin: 0;
         padding: 0;       
}

.menu li{ /*these will be main menu items*/
  list-style: none;
  float: left;
  line-height: 37px;
  font-family: Arial;
  font-size: 13px;
  margin: 0;
  padding: 0;
}

.menu li ul { /*first drop-down*/
 left: -999em;
 position: absolute;
 width: 186px;
 z-index: 500;
 background: #666666;
 display: none;
}

.menu li:hover ul {
  left: auto;
}

.menu li ul ul {
 margin-left: 186px; 
 display: none;
}

.menu li ul li {
  text-align: left;
  width: 186px;
}

.menu a {
  display: block;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  margin: 0;
  padding-left: 30px;
  padding-right: 30px;
}

.menu li.active a {
  background: #454545;
}

.menu a:hover{
 color: #FBF4B6;
 background: #333;
}

.menu li ul li a {
  padding-left: 30px;
  padding-bottom:2px;
  padding-top:2px;
  border-bottom: 1px solid #999;
}

.menu li.active ul li a:hover {
  background: #333;
}

Answer 1

I finally found how to solve this here: http://jsfiddle.net/297t6/

.menu
{
    margin:0;
    padding:0;
}
.menu > li
{
    list-style:none;
    float:left;
    margin:0;
    padding:0;
    position:relative;
}
.menu a
{
    text-decoration:none;
    color:#fff;
    background:red;
    display:block;
    padding:10px;
}
.menu > li ul
{
    margin:0;
    padding:0;
    width:150px;
    position:absolute;
    display:none;
    z-index: 999;
}
.menu > li ul ul
{
    margin:0;
    padding:0;
    width:150px;
    position:absolute;
    display:none;
    left:150px;
    top:0;
    z-index: 999;
}
.menu > li ul li
{
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
}

Copied the CSS and Javascript (which is much cleaner than what I had), changed class names an voilla - it works.