CSS menu item does not capture all mouse movements

Question

I am not sure how to best describe the problem I am having here. I got a CSS driven menu online and adapted it to my needs. It works perfectly in all browsers but in IE it appears that the when you move over from the main navigation to the dropdowns list a items, it does not always capture the movement and then "closes" the dropdown.

I suspect that when you move to over to the dropdown that the list a item does is not a block element thus it closes the dropdown, this only happens if you're not moving to the dropdown and not completely over the text of the list a item.

Here is the link: http://www.tepgtests.co.za/decorex/2012/new_site/ - if you move over from "Shows" to "Durban" and not entirely move your mouse cursor over the word but rather over to the dropdown you will see what it does.

Thank you in advance :)

which version of IE, cause it seems fine to me. Or may be I can't understand exactly what you need — Панайот Толев, Jan 09 '13 at 13:58

score 0 · Answer 1 · edited May 23 '17 at 10:24

0

It sounds like your CSS is using the inline-block directive, which is not well supported in IE.

I think this answer may solve your problem, rather than repeat it: Inline block doesn't work in internet explorer 7, 6

edited May 23 '17 at 10:24

Community

1
1

answered Jan 09 '13 at 13:57

NicolaPasqui · Accepted Answer · 2013-01-09T14:02:32.790

0

There's a 1px of white space,

hovering that space closes the submenu because your not hovering the menu anymore...

try removing it by moving the submenu just below the menu:

.navigation_bar .first_level_menu_block {
      left: 0;
      top: 50px;
}

tested in IE9 , it works

edited Jan 09 '13 at 14:02

answered Jan 09 '13 at 13:57

NicolaPasqui

1,112
8
17

CSS menu item does not capture all mouse movements

2 Answers2