Difficulty with sliding div in usin jQuery

Question

I've looked at a bunch of different posts on here regarding this, I think I'm following everything correctly, but my code is not executing, so obviously I'm not. Wondering if someone here may notice something that I'm overlooking.

I have a navbar, and when users hovers on a menu item I want a div to slide down from under it and show a bunch of content.

Here's the markup:

<nav class="site-navigation main-navigation" role="navigation">
    <div class="menu-1-container">
        <ul id="menu-1" class="menu">
             <li id="menu-item-1">
                <a href="#">Releases</a>
            </li>
        </ul>
    </div>
</nav>

<div class="dropdown-contain">
    <p>Content</p>
</div>

Here's the css:

.dropdown-contain {
    display: none;
}

Here's the .js (Still learning, and haven't fully grasped):

$(document).ready(function(){
    $(".menu-item-475").hover(function () {
        $(".dropdown-contain").stop(true, true).slideToggle("slow");
    });
});

Here's a fiddle. http://jsfiddle.net/ericbrockman/mk4yu/3/

thanks a bunch!!

Answer 1

i have altered your fiddle a bit, have a look Here

things to notice:

1 - you should select your jquery library on the left panel of jsfiddle.
2 - delegating event handlers by attaching them to document seem to work better for me
3 - using custom animation you have more control over the sliding
4 - set position:absolute for the sliding panel if you want it to work correctly
5 - when attaching the mouse hover to a menu item, always include the submenu as well or you will not be able to click the submenu since when you move the mouse out of the menu item the submenu goes off

if you have more questions, please let me know. -if my answer helped you, please consider accepting it :)