Superfish menu does flicker when moving mouse pointer along border

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...