Question

Basically Im trying to keep the white box open when you hover off the menu. I had to position the boxes via css with absolute positioning to right now they are just showing and hiding depending on which menu-item you hover. http://cl.ly/1C1c2Q1A3F3k0g1d2R0z

    $('.menu-item-156').hover(
function() {
    $('.col').fadeIn(200).addClass('expanded');
},
function() {
    $('.col').fadeOut(200);
}
);

is what im using now and the markup in wordpress is like this:

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

<div class="col nav_info"><p>View the Fall ’11 Collection, hot off the runway!</p></div>

wordpress spits out li elements containing the menu items

Answer 1

It seems you want the mouseover event, not the two-headed hover function (which is mouseover plus mouseout).

$('.menu-item-156').mouseover(function () {
    $('.col').fadeIn(200, function () {
        $(this).addClass('expanded');
    }
});