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.

Answer 1

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;
}