Dropdown menu disappears when mouse moves over the drop-down list

Question

I have a blog which is hosted at blogger.google.com.

Recently i encountered a problem with the dropdown menu called "Categories". The children elements(sub menu items) auto disappear just when i move my cursor over them. I have tried the other answers to similar questions like this but they were not of great help in my case.

I just want the dropdown elements to remain at their places when i move my mouse over them so that i can select them.

Can anyone please check the problem?

My website link is http://www.techtreck.in

Try to go to the Categories tab and you will see what exactly i am saying.

Many thanx in advance..

..hope to get a reply soon !!

Answer 1

There is a hidden gap between you main menu and sub menu.Inspecting you css with firebug, I found this in your code :

#top li ul {
    background: none repeat scroll 0 0 #111111;
    margin-top: 20px;
    padding: 5px 0 3px;
    width: 187px;
}

Now margin-top: 20px; is too far from main menu. So change it to:

#top li ul {
        background: none repeat scroll 0 0 #111111;
        margin-top: 14px;
        padding: 5px 0 3px;
        width: 187px;
    }

And it will work fine.

Answer 2

If you move your mouse quick enough it works :P

But it looks like it is due to the gap between the categories and the actual drop down, when you move your mouse down, it goes in the gap so it no longer triggers the onmouseover event, hiding the drop down.

You should move the position of the dropdown up higher, so that it is perfectly align with the categories button.

Answer 3

The gap between the main menu and the submenu is indeed what causes the problem. @kakarott solutions is also what i would do, it is by far the easiest solution. If however the gap is there by design, you could still achieve the desired result by playing with your css. Something like this should do the trick:

• remove the background color of the sub ul to make it transparent
• change the margins of the sub ul into paddings
• change the margins of the sub li into padding as well
• set the background color that was on the sub ul on the sub li
• add the padding that was on the sub ul to the corresponding padding of the sub li

(I did not test this, but it should do the trick i think, if i did not forget anything)

What this does is make the nested ul transparent and overlapping the parent li. This way the hover state remains triggered when you move the mouse onto the submenu. Visualy there should be no changes.