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

WordPress From Bootstrap to WordPress Setup a Bootstrap Theme Adding Ability for Dropdown Navigation

Wes Beale
Wes Beale
2,364 Points
Posted by Wes Beale
Wes Beale
2,364 Points

Drop down menu disappearing

Hi! Racking my brain on this and I'm not getting anywhere.

My dropdown menu is opening, but then disappearing once I move my mouse towards the child pages.

I customized the navbar background to be transparent, but I comment out all of that css I'm still having the same problem.

Any idea what could be causing that?

2 Answers

Addison Legere
Addison Legere
11,587 Points
Addison Legere
Addison Legere
11,587 Points

Make sure there is no space between your first item and its child(the drop down item). Having even 1px of margin could cause this.

Adarsh Prabhu
Adarsh Prabhu
15,394 Points
Adarsh Prabhu
Adarsh Prabhu
15,394 Points

I have removed the margin-bottom on the child elements but the menu still disappears.

Adarsh Prabhu
Adarsh Prabhu
15,394 Points
Adarsh Prabhu
Adarsh Prabhu
15,394 Points

For anyone that is using the project files and having this issue, there seems to be some missing code:

  1. Set the state of the ul.sub-menu
.sub-menu {
    display: none;
}
  1. Add the condition for the ul.sub-menu to react on hover and set the z-index to keep menu on top of everything else
li:hover .sub-menu, ul.sub-menu:hover{
        display: block;
        z-index: 9999;
    }