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

CSS

Jerimiah Willhite
Jerimiah Willhite
12,014 Points
Posted by Jerimiah Willhite
Jerimiah Willhite
12,014 Points

My parent drop down menu background color changes when hovering?

Hi! So what's happening is that I have a list that changes background and text color on hover, and then I have a drop down list built off of that. However, when I start moving down the drop down list, the parent list item's background color changes back to the non-hover state. I've searched all over but can't find what I'm doing wrong.

This is my HTML (I can't get my list to show up. There is a "More" link that is also an li element, with the ID "more": 

<li class="top-nav-list" id="more"><a href="index.html">More</a>
                <ul class="drop-nav">
                <li><a href=index.html>A</a></li>
                <br>
                <li><a href=index.html>B</a></li>
                <br>
                <li><a href=index.html>C</a></li>
                </ul>
            </li>

        </ul>

And this is my CSS:

#more  ul{
    display: none;
    padding: 40px 25px;
    text-decoration: none;
    color: #9f9fa0;
    background-color: white;
    margin: 0;
}

#more a{
    display: inline-block;
    padding: 40px 25px;
    text-decoration: none;
    color: #9f9fa0;
    background-color: white;
    margin: 0;
}


#more a:hover{
    text-decoration: none;
    color: #f6f1e3;
    background-color: #d9c37e;
    margin: 0;
}


#more:hover ul {
    display: block; 
    position: relative;
    margin: 0;
    padding: 0;
    background-color: #d9c37e;
    }

#more:hover ul li{
    float: none;

}

#more:hover ul li a{
    width: 32px;
    background: #d9c37e;
}

Any help would be appreciated, if anyone has time!

1 Answer

Gilbert Kennen
Gilbert Kennen
10,661 Points

Based just on the code-snipped provided, I am unable to replicate the behavior you have described. I wrapped the <ul> in a <div id="more"> element, disabled the non-hover ul padding (which was causing resize on hover) and when I hover inside of this div, everything works as expected.

Whenever my mouse is inside div#more, the background stays #d9c37e and the anchors change color when hovered over.

I would probably suggest DRYing up the CSS a bit (#more ul and #more a are nearly identical), but your problem doesn't seem to live in this bit.

Jerimiah Willhite
Jerimiah Willhite
12,014 Points
Jerimiah Willhite
Jerimiah Willhite
12,014 Points

Thank you so much for the response! I think my problem was that I didn't actually wrap the entire dropdown menu in a div. Wrapping it in a div and then making sure the background color was #d9c37e whenever any link in the div was hovered over fixed the issue. I also went through and cleared out a lot of useless code.

Thanks again!