Targetting items

JavaScript
2

OK, so here’s your code as it stands:

<ul>
    <li>Hello</li>
    <li>World</li>
    <li>Work</li>
        <ul class="dropdown-menu">
            <li>Photography</li>
            <li>Websites</li>
    </ul>
    <li>Contact</li>
</ul>

$(document).ready(function(){
    $(".dropdown-menu  ul ").hide();
    $(".dropdown-menu").hover(function(){
        $(".dropdown-menu  ul").toggle();
    })
});

Your first problem is that the selector .dropdown-menu ul isn’t matching anything, as it’s looking for a ul that is a descendent of an element with the .dropdown-menu class.

Additionally, the hover event won’t get fired on a hidden element, so your dropdown will never be shown.

To get it working, the first thing I would do is to nest the ul for the dropdown inside of li that should be the parent. Then move the dropdown-menu class to the li. Your markup should now look like this:

<ul>
    <li>Hello</li>
    <li>World</li>
    <li class="dropdown-menu">Work
        <ul>
            <li>Photography</li>
            <li>Websites</li>
        </ul>
    </li>
    <li>Contact</li>
</ul>