Drop Down menu met verschillende CSS-styles

[Verwijderd]

Ik wil een dropdown menu maken waarbij de submenu's steeds een andere achtergrondkleur hebben. Het simpelste is dus om een CSS-drop down te maken met verschillende styles gedefinieerd. Dit lukte wel, maar IE werkt niet mee omdat deze Javascript nodig heeft.

Nu heb ik het volgende gemaakt:

http://www.gerkedegroot.nl/werk/rbz/index4.html

In Safari/Firefox heeft ie keurig de 3 verschillende styles toegepast, maar in IE kiest hij alleen de laatste. Dit komt waarschijnlijk door de Javascript.

De CSS ziet er zo uit ( deze code staat steeds dubbel, ik heb ook nog een regel met .li1:hover ul {etc etc} voor Safari/FF:

code:

.li1.over ul{ display: block; background-color:#FF6600; }
.li2.over ul{ display: block; background-color:#FFFF33; }
.li3.over ul{ display: block; background-color:#006699; }


.li1.over ul{ display: block; background-color:#FF6600; }

In de HTML verwijs ik naar deze styles:

code:

<li class="li1">RBZ Human Focus
   <ul>
      <li><a href="">Menuoptie 1</a></li>
      <li><a href="">Menuoptie 2</a></li>
      <li><a href="">Menuoptie 3</a></li>
      <li><a href="">Menuoptie 4</a></li>
      <li><a href="">Menuoptie 5</a></li>
  
        </ul>
    </li>

Waarschijnlijk gooit nu dus de Javascript roet in het eten. Deze ziet er zo uit:

code:

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
    if (document.all&&document.getElementById) {
        navRoot = document.getElementById("nav");
        for (i=0; i<navRoot.childNodes.length; i++) {
            node = navRoot.childNodes[i];
            if (node.nodeName=="LI") {
                node.onmouseover=function() {
                    this.className+=" over";
                }
                node.onmouseout=function() {
                    this.className=this.className.replace(" over", "");
                }
            }
        }
    }
}
window.onload=startList;

//--><!]]></script>

Ik begrijp JS niet, maar zover ik weet zoekt hij naar de node LI en daar verandert hij in de 'over' class iets aan. IE ondersteund standaard het :hover component niet, vandaar dat ik deze nodig heb.


Wie ziet wat hier fout gaat?

[OkkE]

De Javascript voegt een extra class toe.

Wat er precies mis gaat dat zie ik zo snel niet. Zijn de kleuren wel goed als je de regel

code:

li ul {  display: none;  position: absolute;  top: 1em; left: 0; }

uit zet? Verder kan je de styles voor IE en de rest ook combineren, namelijk zo:

code:

.li1:hover ul,
.li1.over ul { /* styles */ }

[ Voor 11% gewijzigd door OkkE op 25-05-2007 15:28 ]

[Verwijderd]

Nee, als ik die regel weghaal is de hele style van het submenu weg.

En dan combineren had ik oorspronkelijk ook, dacht dat het misschien opgelost was om ze te scheiden.. maar nee.

Niemand die precies ziet wat de JS doet? Het lijkt erop dat hij zoekt naar LI, en die style kopieert. Dit zou verklaren waarom hij altijd de onderste van de 3 stijlen pakt. (Het is immers de laaste LI-style die hij tegenkomt).

Of kent iemand een ander drop-down menu die cross-platform goed werkt en waar de CSS simpel te customizen is, zodat ik 3 styles aan de menu's kan hangen?

[Rowanov]

Dat javascriptje (welke je geleend hebt by A List Apart) geeft de li elementen de class " over" als je er met je muis overheen gaat en haalt die weer weg als je muis er niet meer boven hangt. Dit script is puur en alleen omdat IE6 geen :hover ondersteunt.

[ Voor 16% gewijzigd door Rowanov op 28-05-2007 19:01 ]

[Borizz]

Rowanov schreef op maandag 28 mei 2007 @ 18:58:
Dat javascriptje (welke je geleend hebt by A List Apart) geeft de li elementen de class " over" als je er met je muis overheen gaat en haalt die weer weg als je muis er niet meer boven hangt. Dit script is puur en alleen omdat IE6 geen :hover ondersteunt.

Dat is zeker niet de oplossing! Als er namelijk al een classname is gedefinieeerd, wordt er 'over' achter geplakt.

als je dan zoiets hebt als

HTML:

<li class="subitem">item</li>

wordt dat:

HTML:

<li class="subitemover">item</li>

Onderstaande css code werkt niet in IE, omdat je multiple classnames gebruikt dit wordt niet ondersteund in IE (iig t/m IE 6 niet).

Je wilt juist dat er een spatie tussenzit, zodat je meerdere classes aan een tag kan geven.

Verwijderd schreef op vrijdag 25 mei 2007 @ 12:23:

Cascading Stylesheet:

.li1.over ul{ display: block; background-color:#FF6600; }
.li2.over ul{ display: block; background-color:#FFFF33; }
.li3.over ul{ display: block; background-color:#006699; }


.li1.over ul{ display: block; background-color:#FF6600; }

[ Voor 25% gewijzigd door Borizz op 28-05-2007 19:10 ]

[crisp]

IE6 ondersteund ook geen multi-class CSS selectors; voor IE6 is:

Cascading Stylesheet:

.li1.over {}

equivalent aan

Cascading Stylesheet:

.over {}

oftewel: enkel de laatste classname uit de selector wordt herkent door IE6.

[Verwijderd]

Ok. Ik snap nu ongeveer wat er fout gaat. Betekend dit dat het helemaal niet mogelijk is?
Of is er een workaround/hack die het toch mogelijk maakt?

[crisp]

Verwijderd schreef op dinsdag 29 mei 2007 @ 11:46:
Ok. Ik snap nu ongeveer wat er fout gaat. Betekend dit dat het helemaal niet mogelijk is?
Of is er een workaround/hack die het toch mogelijk maakt?

je zou de .hover op de UL kunnen zetten ipv op de LI (vergt ws wel wat meer JS) zodat je dit kan doen:

Cascading Stylesheet:

.li1 ul.hover {}
.li2 ul.hover {}

[Verwijderd]

Dit kan toch ook geheel in CSS??

http://www.cssplay.co.uk/menus/drop_definition2.html

[crisp]

Verwijderd schreef op woensdag 30 mei 2007 @ 10:26:
Dit kan toch ook geheel in CSS??

http://www.cssplay.co.uk/menus/drop_definition2.html

CSS is niet bedoelt voor behavior...