jquery mouseent/leave to make div appears

Question

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;
}

Javascript

$(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);
        }
    });
});

Answer 1

. is a class selector, use # instead to get it as id.

Change $('.menu-seo-desc') to $('#menu-seo-desc')
And $('.menu-seo-desc').fadeOut(300); to $('#menu-seo-desc').fadeOut(300);

Suggestion:
You can bind multiple events to the same element, like the following.

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

Update:

// bind mouseenter and mouseleave for both selectors
$('#menu-seo, #menu-siteaudits').on('mouseenter mouseleave', function(e) {
    // get the related container
    $element = $(this).is('#menu-seo') ? $('#menu-seo-desc') : $('#menu-seo-desc2');
    // execute the action according to the event
    if(e.type == 'mouseenter') {
        $element.fadeIn(600);
    } else {
        $element.fadeOut(300);
    }
});