Hover Menu Jquery

Script Code

$('.mainnav li').hover(
function () {
//show its submenu
$('ul', this).stop().slideDown(150);

},
function () {
//hide its submenu
$('ul', this).stop().slideUp(150);
}
);

CSS:

.mainnav{
margin-top:45px;
}

.mainnav li a{
padding:15px 10px;
font-weight:bold;
border-top:3px solid #ececec;
display:block;
text-transform:uppercase;
font-size:12px;
position:relative;
height:19px;
}
.mainnav li a:hover{
border-top:3px solid #67bed8;
}
.mainnav ul li ul{
display:none;
position:absolute;
z-index:10000;
width:200px;
background:#edebeb;
border-top:3px solid #67bed8;
}
/*.mainnav ul li:hover ul{
display:block;

}*/
.mainnav ul li ul li{
float:none;
margin:0;
}
.mainnav ul li ul li a{
padding:10px;
border-bottom:1px solid #ccc;
border-top:1px solid #edebeb;
height:auto;
font-weight:normal;
}
.mainnav ul li ul li a:hover{
border-bottom:1px solid #ccc;
border-top:1px solid #f5f4f4;
background:#f5f4f4;
}

.mainnav li{
margin:0px 5px;
}
.mainnav li.no_margin{
margin-right:0px;
}

HTML

  <nav class="mainnav">
            <ul id="nav">
            <li><a href="#">WHO WE ARE</a>
             <ul>
              <li><a href="#">Management Team</a></li>
              <li><a href="#">Our Mission Statement</a></li>
              <li><a href="#">Contact Us</a></li>
              </ul>
            </li>
            <li><a href="#">What we offer</a>
            <ul>
            <li><a href="#">Our Products</a></li>
              <li><a href="#">Database Management</a></li>
              <li><a href="#">Analytics &amp; Reporting</a></li>
              <li><a href="#">Business Intelligence</a></li>
              <li><a href="#">Marketing Consulting</a></li>
              <li><a href="#">Campaign Management</a></li>
              </ul>
            </li>
            <li><a href="#">Why Ideal</a>
             <ul>
             <li><a href="#">We are here to help YOU</a></li>
              <li><a href="#">Media Room</a></li>
              <li><a href="#">White Papers &amp; Case Studies</a></li>
              <li><a href="#">Demo Login</a></li>
              <li><a href="#">Customer Login</a></li>
              <li><a href="#">New User</a></li>
              </ul>
            </li>
            <li><a href="#reg_login" class="fancybox">Demo Login</a></li>
            <li><a href="#">Live Help Online</a></li>
            </ul>

        </nav>