Javascript drop-down menu not working
I'm doing a site redesign and something's wrong with my CSS/javascript and I can't get the drop down menus to pop up.

CSS

    #menu {
    font-size:large;
    margin:0;
    padding:0 0 0 .5em;
    list-style:none;
    width:100%;
    text-align:left;
    }
    
    
    #menu ul, #menu li {
    padding:0 0 0 2em;
    background-color:gray;
    width:auto;
    border-bottom:1 gray solid;
    }
    
    /*LI display inline */
    #menu li {
    float:left;
    background:white;
    position:relative;
    list-style:none;
    margin:0 0 0 0;
    text-align:center;
    
    }
    
    /*parent menu*/
    #menu li a {
    display:block;
    padding:0 0 0 0;
    height:40px;
    font-weight:200;
    float:left;
    text-decoration:none;
    text-align:center;
    color:black;
    border:1 1 1 1;
    }
    
    #menu li a:hover {
    color:#eeeeee;
    text-align:center;
    }
    
    /* style for default selected value */ 
    #menu a.selected {
    color:#6699FF;
    }
    /* submenu */ 
    #menu ul {
    position:absolute;
    display:none;
    margin:0 0 0 -1px;
    padding:0;
    list-style:none;
    text-align:center;
    }
    
    #menu ul {
    left: 0;
    }
    #menu ul ul {
    top: -1px;
    background:0063dc;
    text-align:center;
    color:black;
    font-weight:200;
    text-align:center;
    }
    
    #menu ul li {
    /*overflow:hidden;*/
    border-top:1px solid #eeeeee;
    height:25px;
    margin:0 0 0 -1px;
    }
    
    #menu ul li:hover {
    position: relative;
    }
    
    #menu ul a {
    display:block;
    color:white;
    }
    
    #menu ul a:hover {
    text-decoration:none;
    }

JS

    $(document).ready(function() {
    
        $("#nav li").hover(
            function () {
            $(this).children("ul").css({zIndex:90}).fadeIn(250);
            },function(){
            $(this).children("ul").fadeOut(250);
        });//hover
    
    });// document ready

HTML

   

     <input type="hidden" name="arav" />
        				<ul id="menu">
        <li><a href="#">HOME</a></li>
        <li><a href="#">MEMBERS</a></li>
        <li><a href="#">FACTS</a></li> 
        <li><a href="#">TEST</a></li>
        <li><a href="#">EDUCATION</a></li>
        <li><a href="#">RESOURCES</a></li>
        <li><a href="#">RESEARCH</a></li> 
        <li><a href="#">CONTACT US</a></li>
        
         
    
    </ul> 	


Javascript drop-down menu not working
===

I'm doing a site redesign and something's wrong with my CSS/javascript and I can't get the drop down menus to pop up.

CSS

    #menu {
    font-size:large;
    margin:0;
    padding:0 0 0 .5em;
    list-style:none;
    width:100%;
    text-align:left;
    }
    
    
    #menu ul, #menu li {
    padding:0 0 0 2em;
    background-color:gray;
    width:auto;
    border-bottom:1 gray solid;
    }
    
    /*LI display inline */
    #menu li {
    float:left;
    background:white;
    position:relative;
    list-style:none;
    margin:0 0 0 0;
    text-align:center;
    
    }
    
    /*parent menu*/
    #menu li a {
    display:block;
    padding:0 0 0 0;
    height:40px;
    font-weight:200;
    float:left;
    text-decoration:none;
    text-align:center;
    color:black;
    border:1 1 1 1;
    }
    
    #menu li a:hover {
    color:#eeeeee;
    text-align:center;
    }
    
    /* style for default selected value */ 
    #menu a.selected {
    color:#6699FF;
    }
    /* submenu */ 
    #menu ul {
    position:absolute;
    display:none;
    margin:0 0 0 -1px;
    padding:0;
    list-style:none;
    text-align:center;
    }
    
    #menu ul {
    left: 0;
    }
    #menu ul ul {
    top: -1px;
    background:0063dc;
    text-align:center;
    color:black;
    font-weight:200;
    text-align:center;
    }
    
    #menu ul li {
    /*overflow:hidden;*/
    border-top:1px solid #eeeeee;
    height:25px;
    margin:0 0 0 -1px;
    }
    
    #menu ul li:hover {
    position: relative;
    }
    
    #menu ul a {
    display:block;
    color:white;
    }
    
    #menu ul a:hover {
    text-decoration:none;
    }

JS

    $(document).ready(function() {
    
        $("#nav li").hover(
            function () {
            $(this).children("ul").css({zIndex:90}).fadeIn(250);
            },function(){
            $(this).children("ul").fadeOut(250);
        });//hover
    
    });// document ready

HTML

   

     <input type="hidden" name="arav" />
        				<ul id="menu">
        <li><a href="#">HOME</a></li>
        <li><a href="#">MEMBERS</a></li>
        <li><a href="#">FACTS</a></li> 
        <li><a href="#">TEST</a></li>
        <li><a href="#">EDUCATION</a></li>
        <li><a href="#">RESOURCES</a></li>
        <li><a href="#">RESEARCH</a></li> 
        <li><a href="#">CONTACT US</a></li>
        
         
    
    </ul> 	

