Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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

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!