repro steps
Move mouse hover the Project entry
Move mouse down to Office items
at this moment you will noticed that the dropdown items move up and hide a little bit the Project orange underline.
According to your code, you attach mouseenter event to <ul> with class “dropdown-menu” and <ul> “.dropdown-menu” is child of Project item. So it will trigger mouseenter event of <ul> “.dropdown-menu” and hover event of <li> “#Project”, which cause the issue.
For debug html and CSS issues, you could try to use F12 developer tools.
Member
4 Points
17 Posts
Dropdown items shift down when mouse hover
Jul 13, 2016 02:10 PM|olfer73|LINK
Hello
I cannot figure out ou to fix this issue
I did this JSFiddler sample to better understand my issue.
repro steps
Move mouse hover the Project entry
Move mouse down to Office items
at this moment you will noticed that the dropdown items move up and hide a little bit the Project orange underline.
is there a way to avoid this ?
All-Star
40025 Points
6051 Posts
Microsoft
Re: Dropdown items shift down when mouse hover
Jul 14, 2016 08:56 AM|Fei Han - MSFT|LINK
Hi olfer73,
According to your code, you attach mouseenter event to <ul> with class “dropdown-menu” and <ul> “.dropdown-menu” is child of Project item. So it will trigger mouseenter event of <ul> “.dropdown-menu” and hover event of <li> “#Project”, which cause the issue.
For debug html and CSS issues, you could try to use F12 developer tools.
https://msdn.microsoft.com/en-us/library/bg182326(v=vs.85).aspx
Best Regards,
Fei Han
MSDN Community Support
Please remember to "Mark as Answer" the responses that resolved your issue.
Member
4 Points
17 Posts
Re: Dropdown items shift down when mouse hover
Jul 19, 2016 01:09 PM|olfer73|LINK
I have finally found a solution by applying the border on the a instead of the li
https://jsfiddle.net/mxy5rb02/2/