Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Andrew Dickens
Andrew Dickens
18,352 Points

jQuery hover dropdown menu wont stay down

Hi, Just trying to make some drop down nav with jQuery. I have the dropdown menu "display: none" until the mouse hovers over the title then use .slideDown to make it viewable, Problem is when I move the mouse down over the menu it slidesUp as I am no longer hovering over the title... Any idea how to make it stay down while I hover over the drop down but slide back up when I am not. Or is there a completely different way of doing it?

<nav>
        <ul>
            <li class="list-item">morning
                <div class="drop-down">
                    <p>water</p>
                    <p>earth</p>
                    <p>fire</p>
                    <p>wind</p>
                </div>
            </li>

            <li class="list-item">afternoon
            <div class="drop-down">
                    <p>flour</p>
                    <p>yeast</p>
                    <p>salt</p>

                </div></li>

            <li class="list-item">evening
            <div class="drop-down">
                    <p>yellow</p>
                    <p>orange</p>
                    <p>blue</p>
                    <p>red</p>
                    <p>green</p>
                    <p>cherise</p>
                </div></li>
        </ul>
    </nav>

nav {
}

nav ul{
    display: flex;
    flex-direction: row;
    justify-content: center
}

nav li {
    font-size: 1.5rem;
    margin: 10px 10px 40px;
    font-weight: 800;
    padding: 7px; 
    cursor: pointer;
}

.list-item{
    transition: .4s;
}

.drop-down{
    position: absolute;
    text-align: center;
    font-size: 1.2rem;
    display: none;
    margin-top: 15px; 
}

.drop-down p {
    padding: 5px;
    margin: 5px;
    background: grey;
    color: white;
}

$('li').hover(
    function(){
        $( this ).css("background-color", "yellow");
        $('.drop-down', this).slideDown();
    }, function(){
        $( this ).css("background-color", "");
        $('.drop-down', this).slideUp();
    }
);