Superfish Menu - HOVER Problem IE6

Superfish Menu - HOVER Problem IE6

Hallo ..

ich benutze das superfish-Menü für ein 2 Ebenen Klappmenü. Es funktioniert erfolgreich für alle Browser AUßER den IE6. Im IE6 funktioniert sogar das Ausklappen wunderbar, allerdings habe ich scheinbar ab irgendeinem Punkt etwas falsch gemacht, weil:
- diejenigen Menüpunkte, die KEIN Submenü haben, bekommen den hover-Effekt nur beim direkten KLICK darauf und nicht beim hovern. Meine Listenpunkte bekommen alle IDs (kategorienamen) und dazugehörige Hintergrundbilder. Wie gesagt, für das Hovern bei Menüpunkten mit Submenü klappts für den IE6 auch (das Hintergrundbild wechselt dann). Aber Einfache Kategorien ohne Submenü bekommen das Hover-Bild erst nach KLICK auf den Menüpunkt kuirz angezeigt. 

HILFE :-) Hat jemand spontan eine Idee?? Wo hab ich was zerschossen? (in der js habe ich nichts verändert)


  3. /*** ESSENTIAL STYLES ***/
  4. .sf-menu, .sf-menu * {
  5. margin: 0;
  6. padding: 0;
  7. list-style: none;
  8. z-index:999;
  9. }
  10. .sf-menu {
  11. line-height: 1.0;
  12. }
  13. .sf-menu ul {
  14. position: absolute;
  15. top: -999em;
  16. width: 210px; /* left offset of submenus need to match (see below) */
  17. }
  18. .sf-menu ul li {
  19. width: 100%;
  20. }
  21. .sf-menu li li a:hover{
  22. visibility: inherit; /* fixes IE7 'sticky bug' */
  23. background: #da4558 url(../img/buttons/list_hover.gif) no-repeat;
  24. background-position:1.5em center;
  25. }
  26. .sf-menu li li a span{
  27. display:block;
  28. margin-left:1.3em;
  29. }
  30. .sf-menu li {
  31. float: left;
  32. height: 30px;
  33. position: relative;
  34. display: block;
  35. }
  36. .sf-menu a {
  37. display: block;
  38. position: relative;
  39. }
  40. .sf-menu li:hover ul,
  41. .sf-menu li.sfHover ul {
  42. right: 0px;
  43. top: 30px; /* match top ul list item height */
  44. z-index: 99;
  45. }
  46. ul.sf-menu li:hover li ul,
  47. ul.sf-menu li.sfHover li ul {
  48. top: -9em;
  49. }
  50. ul.sf-menu li li:hover ul,
  51. ul.sf-menu li li.sfHover ul {
  52. left: 10em; /* match ul width */
  53. top: 0;
  54. }
  55. ul.sf-menu li li:hover li ul,
  56. ul.sf-menu li li.sfHover li ul {
  57. top: -999em;
  58. }
  59. ul.sf-menu li li li:hover ul,
  60. ul.sf-menu li li li.sfHover ul {
  61. left: 10em; /* match ul width */
  62. top: 0;
  63. }
  64. /****LINKS HORIZONTALES MENU****************************************************/
  65. .sf-menu li#punkt1{
  66. width:80px;
  67. background:url(../img/PFAD) no-repeat;
  68. }
  69. .sf-menu li#punkt2{
  70. width:83px;
  71. background:url(../img/PFAD) no-repeat;
  72. }
  73. .sf-menu li#punkt3{
  74. width:70px;
  75. background:url(../img/PFAD) no-repeat;
  76. }
  77. .sf-menu li#punkt4{
  78. width:63px;
  79. background:url(../img/PFAD) no-repeat;
  80. }
  81. .sf-menu li#punkt1:hover, .sf-menu li#punkt1.sfHover{
  82. width:80px;
  83. background:url(../img/PFAD) no-repeat;
  84. }
  85. .sf-menu li#punkt2:hover, .sf-menu li#punkt2.sfHover{
  86. width:45px;
  87. background:url(../img/PFAD) no-repeat;
  88. }
  89. .sf-menu li#punkt3:hover, .sf-menu li#punkt3.sfHover{
  90. width:100px;
  91. background:url(../img/PFAD) no-repeat;
  92. }
  93. .sf-menu li#punkt4:hover, .sf-menu li#punkt4.sfHover{
  94. width:90px;
  95. background:url(../img/PFAD) no-repeat;
  96. }
  97. /*** DEMO SKIN ***/
  98. .sf-menu {
  99. float: left;
  100. margin-bottom: 1em;
  101. }
  102. .sf-menu a {
  103. padding: .75em 1em;
  104. text-decoration:none;
  105. }
  106. .sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
  107. color:#FFFFFF;
  108. font-family:Arial, sans-serif;
  109. }
  110. .sf-menu li {
  112. }
  113. .sf-menu li li {
  114. border-bottom: solid 1px #cd554;
  115. }
  116. .sf-menu li li li {
  117. background: #9AAEDB;
  118. }
  119. .sf-menu li:hover, .sf-menu li.sfHover,
  120. .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
  121. outline: 0;
  122. }

  124. /*** arrows **/
  125. .sf-menu a.sf-with-ul {
  126. padding-right: 2.25em;
  127. min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
  128. }
  129. .sf-sub-indicator {
  130. position: absolute;
  131. display: block;
  132. right: .75em;
  133. top: 1.05em; /* IE6 only */
  134. width: 10px;
  135. height: 10px;
  136. text-indent: -999em;
  137. overflow: hidden;
  138. }
  139. a > .sf-sub-indicator {  /* give all except IE6 the correct values */
  140. top: .8em;
  141. background-position: 0 -100px; /* use translucent arrow for modern browsers*/
  142. }
  143. /* apply hovers to modern browsers */
  144. a:focus > .sf-sub-indicator,
  145. a:hover > .sf-sub-indicator,
  146. a:active > .sf-sub-indicator,
  147. li:hover > a > .sf-sub-indicator,
  148. li.sfHover > a > .sf-sub-indicator {
  149. background-position: -10px -100px; /* arrow hovers for modern browsers*/
  150. }

  152. /* point right for anchors in subs */
  153. .sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
  154. .sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
  155. /* apply hovers to modern browsers */
  156. .sf-menu ul a:focus > .sf-sub-indicator,
  157. .sf-menu ul a:hover > .sf-sub-indicator,
  158. .sf-menu ul a:active > .sf-sub-indicator,
  159. .sf-menu ul li:hover > a > .sf-sub-indicator,
  160. .sf-menu ul li.sfHover > a > .sf-sub-indicator {
  161. background-position: -10px 0; /* arrow hovers for modern browsers*/
  162. }

  164. /*** shadows for all but IE6 ***/
  165. /*.sf-shadow ul {
  166. background: url('../images/shadow.png') no-repeat bottom right;
  167. padding: 0 8px 9px 0;
  168. -moz-border-radius-bottomleft: 17px;
  169. -moz-border-radius-topright: 17px;
  170. -webkit-border-top-right-radius: 17px;
  171. -webkit-border-bottom-left-radius: 17px;
  172. }
  173. .sf-shadow ul.sf-shadow-off {
  174. background: transparent;
  175. }*/

  177. Vielen Dank....