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

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 !!

Solution

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.