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.
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
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
40535 Points
6233 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
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/