I am looking to hover over my list item and have an effect similar to something like facebook chat is my best example..I am able to get the first div to appear but I believe this may be a selector issue because I cant get the rest working properly

html

<ul id="menu_seo" class="menu">
        <li id="menu-seo"><span class="arrowout1"></span>SEO</li>
        <li id="menu-siteaudits"><span class="arrowout2"></span>Site Audits </li>
        <li id="menu-linkbuilding"><span class="arrowout3"></span>Link-Building</li>
        <li id="menu-localseo"><span class="arrowout4"></span>Local SEO</li>
</ul>

<div id="main_content">


<div id="menu-seo-desc">
<p>SEO management begins with a full website diagnosis of current web strategy Adjustments are made to improve your site’s ability to rank higher on search engines and draw more traffic
</p>
</div>

<div id="menu-seo-desc2">
<p>Usability & site architecture review, Search Engine accessibility and indexing, Keyword research & targeting and Conversion rate optimization
</p>
</div>


</div>

css

#menu-seo-desc {

height:125px;
width:210px;
background-color:red;
border-color:#CCC #E8E8E8 #E8E8E8 #CCC;
border-style:solid;
border-width:1.5px;
border-radius:5px;
box-shadow: 1px 0 2px 0px #888;
-moz-box-shadow: 1px 0 2px 0px #888;
-webkit-box-shadow: 1px 0 2px 1px #888;
position:absolute;
top:220px;
left:350px;
display:none;

}

js

 <script>
    $(document).ready(function(){


            <script>
    $(document).ready(function(){

        $('#menu_seo').on('#menu-seo', {
             'mouseenter': function() {
                $('#menu-seo-desc').fadeIn(600);
                $('#menu-seo-desc2').fadeIn(600);


        },

             'mouseleave': function() {
                $('#menu-seo-desc').fadeOut(300);
                $('#menu-seo-desc2').fadeOut(300);
         }
    });

});

    </script>

});