drop down list slowly drop

drop down list slowly drop when we hover on drop down list

HTML

<ul class="file_menu">
        <li><a href="#file">File</a></li>
        <li><a href="#edit">Edit</a></li>
        <li><a href="#view">View</a></li>
        <li><a href="#insert">Insert</a></li>
        <li><a href="#modify">Modify</a></li>
        <li><a href="#control">Control</a></li>
        <li><a href="#debug">Debug</a></li>
        <li><a href="#window">Window</a></li>
        <li><a href

CSS

body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    background-color: #333333;
}

#container {
    margin: auto;
    width: 490px;
}

#header {
    background-image: url(images/header.png);
    background-repeat: no-repeat;
    height: 42px;
    width: 490px;
    margin-bottom: 20px;
}

#button {
    height: 32px;
    width: 184px;
    margin: auto;
}

ul, li {
    margin:0; 
    padding:0; 
    list-style:none;
}

.menu_class {
    border:1px solid #1c1c1c;
}

.file_menu {
    display:none;
    width:300px;
    border: 1px solid #1c1c1c;
}

.file_menu li {
    background-color: #302f2f;
}

.file_menu li a {
    color:#FFFFFF; 
    text-decoration:none; 
    padding:10px; 
    display:block;
}

.file_menu li a:hover {
    padding:10px;
    font-weight:bold;
    color: #F00880;
}

JavaScript

$(document).ready(function () {
    $(".hoverli").hover(
  function () {
     $('ul.file_menu').slideDown('slow');
  }, 
  function () {
     $('ul.file_menu').slideUp('slow');
  }
);

});