Drop Down menu disappears when mouse hover

Question

I have made a test page for my site

Demo Link

The dropdown menu here is disappearing whenever I hover the mouse over it.

I have seen and tried the various solution already mentioned in the forum but none seem to help correct it. Please help, I want to solve this.

Solution 1

Try to change

/*Display the dropdown on hover*/
 nav#nav-main ul li a:hover + .hidden, .hidden:hover {
display: block;
}

to

/*Display the dropdown on hover*/
   nav#nav-main ul li:hover ul{
   display: block;
}

Solution 2

You need to make following changes in css. Make a hover effect on li. Also you need to set the position and z-index of header-top to work the dropdown menu properly

.header-top{
  height: 72px;
  position: relative;
  z-index: 90;
}

ul.hidden {
  position: absolute;
}

nav#nav-main ul li:hover a + .hidden { 
  display: block;
}

Comments

[Richie]

Hi, on applying this change the drop-down stops appearing at all. Sorry this doesn't work.

[Richie]

Yes! This is exactly what I needed! Thanks for the learning! :)

[Richie]

This fix is working as well. Although, I'll go with the above mentioned answer as it requires minimal editing. Thanks for your help.