Superfish menu does flicker when moving mouse pointer along border

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?

Solution

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.