Superfish menu does flicker when moving mouse pointer along border - css

Question

The superfish menu here does flicker when moving the mouse pointer along the border: http://www.kine-stammheim.ch/
The css file is here: http://www.kine-stammheim.ch/css/navigation/superfish.css
My guess was that the hover item would have a different size than the standard and this is why it would flicker. But I cannot find the issue...
Who can help?

Answer 1

The problem was being caused by the margin you had on the hover state.
This is what I changed
.sf-menu li {
margin: 0px;
padding: 5px; /* I added your 5px margin as padding to the li that contains the a. This gave the same effect without confusing the hover state */
list-style: none;
float:left;
background: #536bff;
}
.sf-menu a {
line-height: 35px; /* I removed 10px of line-height since the li now has a 5px padding */
padding: 0 15px;
color: #fff;
text-decoration: none;
letter-spacing: 1px;
display: block;
}
body#home a#homeNav,
body#ikmethode a#ikmethodeNav,
body#uebermich a#uebermichNav ,
body#contact a#contactNav,
body#anwendung a#anwendungNav,
.sf-menu > li > a:hover,
.sf-menu > li.current > a,
.sf-menu > li.sfHover > a {
background: #8398ff url(../../images/bg-top-a-active.png) no-repeat center bottom;
height: 35px;
line-height: 35px;
border-radius: 5px;
text-decoration: none;
}
Here is a working JSFIDDLE to show you the end result.

Answer 2

Have you tried hoverIntent plugin?
Supports the hoverIntent plugin.
Superfish automatically detects the
presence of Brian Cherne’s hoverIntent plugin and uses its advanced
hover behaviour for the mouseovers (mouseout delays are handled by
Superfish regardless of the presence of hoverIntent). Using this is
only an option, but a nice one. The examples on this page are using
hoverIntent. If for some reason you want to use hoverIntent on your
page for other plugins but do not want Superfish to use it you can set
the option disableHI to true. Important note: As of v1.5.1 you must
use the updated version (r7) of hoverIntent which supports event
delegation.
hoverIntent is a plug-in that attempts to determine the user's
intent... like a crystal ball, only with mouse movement! It is similar
to jQuery's hover method. However, instead of calling the handlerIn
function immediately, hoverIntent waits until the user's mouse slows
down enough before making the call.
Why? To delay or prevent the accidental firing of animations or ajax
calls. Simple timeouts work for small areas, but if your target area
is large it may execute regardless of intent. That's where hoverIntent
comes in...