css - 境界線に沿ってマウス ポインターを移動すると、Superfish メニューがちらつく

Question

ここのスーパーフィッシュ メニューは、境界線に沿ってマウス ポインターを移動するとちらつきます: http://www.kine-stammheim.ch/ css ファイルはこちら: http://www.kine-stammheim.ch/css/navigation/superfish .css

私の推測では、ホバーアイテムは標準とは異なるサイズになり、これがちらつきの理由です. しかし、私は問題を見つけることができません...

誰が助けることができますか？

Answer 1

問題は、ホバー状態でのマージンが原因でした。

これが私が変えたものです

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

これは、最終結果を示すための実際のJSFIDDLEです。