CSS菜单下拉悬浮问题

Question

I'm having an issue with a responsive dropdown navigation list whereby if you move the mouse slowly off of a parent link, the submenu for the last parent item shows instead.

I've uploaded an example at: http://webe.emv3.com/aps/twelve/primary.html

If you hover over 'Top Up Card' then move the mouse slowly downwards towards the submenu, help is activated instead.

Do you have any idea why this might be happening?

Answer 1

It's because .rdd-menu .submenu-panel is not hidden and/or positioned out of the way. So when you :hover over the parent all the .submenu-panel 's are still visible. Having a height:0 does not hide an element.

A simple:

.rdd-menu .submenu-panel {
   display: none;
}    

.rdd-menu li:hover > .submenu-panel {
   display: block;
}

will fix it. You can disregard your height declarations too.

edit: I just noticed you had transitions on them. You can just position the submenu's offscreen to keep the transitions intact:

.rdd-menu .submenu-panel {
   top: -10%;
}    

.rdd-menu li:hover > .submenu-panel {
   top: 100%;
}

Answer 2

I've located the reason. There was an issue with the borders on line 153-156:

.rdd-menu .submenu-panel    {
    border-radius:0 0 10px 10px;
    border:1px solid #ccc;
    border-top:0;

Even though the top border had been removed, having the left, right, and bottom borders caused the issue. Removing them has resolved it.

I appreciate your help with this. Thank you.