[CSS] knipperen bij wisselen menu items uitklapmenu

[bat266]

Ik ben een site t maken met een uitklapmenu op basis van css en een html list.
Dit werkt allemaal redelijk goed.
Het probleem is dat in Firefox bij het wisselen van menu elementen wit gaat knipperen.
Ik vind het heel vreemd omdat dit alleen in Firefox gebeurd. (getest op ie6, opera 8.5 en firefox 1.0)
Zelf heb ik geen idee waar het aan zou kunnen liggen.

de css

Cascading Stylesheet:

/*menu laten uitklappen*/
 ul.menu, li.menu {
  margin:0;
  padding:0;
  display:block;
  color:#FFCC00;
  font-style:normal;
  text-decoration:none;
 }

ul.menu {
  list-style:none;
  width:100px;
  padding:0px;
  border-color:#000000;
  border-width:thin;
  border-style:solid;
   } 
 
 li.menu  {
  position:relative;
  padding:3px;
  background-color:#FFCC00;/*bgcolor van ongeselecteerd item */
  z-index:9;
   
 }
 
  /* decoratieve hover */

  li.menu:hover {
   background-color:#FFFFFF;/*bgcolor van geselecteerditem*/
   z-index:15;  
  }

 /* Alle subnavigatie verbergen */
  
 ul.menu  ul.menu  {
  position:absolute;
  display:none;
  right:-90px;
  top:4px;
 
 }
  
  /* :hover, met specificity */
  
  li:hover ul.menu  ul.menu  {
   display:none;

  }

  li.menu:hover ul.menu , li.menu:hover li.menu:hover ul.menu  {
   display:block;
    z-index:21;
  }

en de relevante html van de list

HTML:

<ul class="menu">
   <li class="menu"><a href="index.php?link=home">Home</a></li>
   <li class="menu">
      <a >teams</a>
      <ul class="menu">
         <li class="menu"><a>jeugd</a></li>
         <li class="menu"><a>heren</a>
            <ul class="menu">
              <li class="menu"><a>item1.2.1</a></li>
              <li class="menu"><a>item1.2.2</a></li>
            </ul>
         </li>  
         <li class="menu"><a>dames</a></li>
      </ul>
   </li>
   <li class="menu"><a href="index.php?link=laatste_nieuws">laatste nieuws</a></li>
   <li class="menu"><a href="index.php?link=informatie" >Informatie</a>
     <ul class="menu">
       <li class="menu"><a href="index.php?link=OnsClubhome">Ons Clubhome</a></li>
       <li class="menu"><a href="index.php?link=geschiedenis">Geschiedenis</a></li>
       <li class="menu"><a href="index.php?link=bestuur">Bestuur</a></li>
       <li class="menu"><a href="index.php?link=clubkampioenen">Clubkampioenen</a></li>
       <li class="menu"><a href="index.php?link=trainingen">Trainingen</a></li>
     </ul>
   </li>   
</ul>

Het zoeken naar vergelijkbare problemen heeft niks opgeleverd.
Nu is mijn vraag dus wie weet waar het aan ligt en hoe ik het eventueel kan oplossen

edit: de site is te bekijken op http://www.mvvenrooij.nl/ttv

[ Voor 19% gewijzigd door bat266 op 21-11-2005 19:55 ]

[BtM909]

Het probleem ligt aan de floats die je gebruikt, zie zo 1-2-3 ook geen clearing
of clear in je CSS staan; daar zou je nog mee kunnen spelen.

Las wel meerdere websites over je issue, wat wellicht jouw probleem fixed:
http://www.sitepoint.com/...0&mode=linear#post1222240
http://archivist.incutio.com/viewlist/css-discuss/40556
http://www.webmasterworld.com/forum83/5847.htm
http://archivist.incutio.com/viewlist/css-discuss/65571

[crisp]

offtopic:
waarom heeft alles een class="menu" Je kan toch gewoon je top-element een class geven en de rest mbv descendant selectors doen?

[bat266]

crisp schreef op maandag 21 november 2005 @ 20:21:

offtopic:
waarom heeft alles een class="menu" Je kan toch gewoon je top-element een class geven en de rest mbv descendant selectors doen?

Dit komt waarschijnlijk uit onwetendheid en het zo werkte, zal er ff naar kijken

Het probleem lijkt dus te komen door floats. Ik denk dat ik dan met fixed positions ga werken. Dit lijkt me de makkelijkste oplossing van het probleem. De links gaven alleen geen oplossing voor het probleem aan.

[ Voor 29% gewijzigd door bat266 op 21-11-2005 20:39 ]

[FireArrow]

Gaat er misschien iets mis in de Z-index?

ik heb eerlijkgezegd weinig verstand van deze menu's. Zelf nog eens het wiel her-uitvinden.

edit: ik zeg dat wel zo... maar dit klopt idd volgens mij niet

li.menu {
position:relative;
padding:3px;
background-color:#FFCC00;/*bgcolor van ongeselecteerd item */
z-index:9;

}

/* decoratieve hover */

li.menu:hover {
background-color:#FFFFFF;/*bgcolor van geselecteerditem*/
z-index:15;
}

Moeten deze niet beide een z-index van 9 of 15 hebben. Want het is toch dezelfde knop waar het over gaat? Hij zal misschien iets dubbel pakken omdat het allemaal '#menu''s zijn

[ Voor 124% gewijzigd door FireArrow op 21-11-2005 20:51 ]

[bat266]

FireArrow schreef op maandag 21 november 2005 @ 20:48:
Gaat er misschien iets mis in de Z-index?

ik heb eerlijkgezegd weinig verstand van deze menu's. Zelf nog eens het wiel her-uitvinden.

edit: ik zeg dat wel zo... maar dit klopt idd volgens mij niet


[...]

Moeten deze niet beide een z-index van 9 of 15 hebben. Want het is toch dezelfde knop waar het over gaat? Hij zal misschien iets dubbel pakken omdat het allemaal '#menu''s zijn

als de z-index gelijk maak op 9 en of 15 gaat t mis met t submenu dus dit moet wel

[crisp]

Hier in Firefox 1.5RC2 heb ik geen probleem met knipperende menu-items hoor...

Ik heb overigens wel een soortgelijk menu voor je liggen. Dit is feitelijk een JS implementatie om een delay voor het verbergen te bewerkstelligen, maar kan net zo goed CSS-only worden toegepast (stukje CSS dat gecomment staat un-commenten en de javascript eruit gooien en vervangen door een scriptje dat :hover en de child-selector voor IE implementeerd - IE7 van Dean Edwards bijvoorbeeld).

[ Voor 78% gewijzigd door crisp op 21-11-2005 21:45 ]

[Tranq]

Dit kan te maken hebben met een bug in IE. IE cached met bepaalde settings niet de background images die in CSS zijn geset. En download deze elke keer als er van style gewisselt wordt. Er is niet echt een standaard oplossing voor dit probleem, maar je zou eventueel hier kunnen kijken

Of ik lees eerst een posting goed lezen...ik zie dat je niet met achtergrond plaatjes werkt....

[ Voor 14% gewijzigd door Tranq op 21-11-2005 22:41 ]

[bat266]

Uhm tis ook alleen in firefox 1.07 en werkt dus in de nieuwe versie van FF dan laat ik t zo en wacht ik op de update