Drop-line menu

[SpaceK33z]

Ik ben bezig met een drop-line menu. Nu heb ik die niet helemaal zelf gemaakt (wel helemaal aangepast), maar van cssplay.
Nou heb ik 'm zo aangepast dat als je met je cursor over een hoofditem heen gaat, het plaatje verandert en gelijk word aan de kleur van de onderste balk (zie voorbeeld).
Dit werkt perfect, op een ding na. Ik wil graag dat als je met je muis nog in dat balkje staat, 'ie nog gehoverd blijft. Als je nu naar een van de subitems wilt gaan, gaat het plaatje (wat dan gelijk is aan de onderste kleur) weer terug naar zijn eerste stand, wat er niet mooi uit ziet.
Weet iemand hoe ik dit kan aanpassen, zodat 'ie gehoverd blijft als je een subitem gaat kiezen, desnoods met Javascript?

Het voorbeeld:
http://keeskluskens.nl/dump/websites/stp/

De code:

HTML:

<div id="nav">


<ul class="select"><li><a href="#" class="navblauw">Home
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub blauw">
<li><a href="#">Welkom</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">FAQ</a></li>
</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>





<ul class="current"><li><a href="#" class="navgroen">Actueel
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub_active groen">
<li><a href="#">Nieuws</a></li>
<li><a href="#">Persberichten</a></li>
<li><a href="#">Evenementenagenda</a></li>
</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>


<ul class="select"><li><a href="#" class="navrood">Activiteiten
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub rood">
<li><a href="#">TU Eindhoven</a></li>
<li><a href="#">TU Delft</a></li>
<li><a href="#">Twente</a></li>
<li><a href="#">Landelijk</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>

<ul class="select"><li><a href="#" class="navgeel">Stichting
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub geel">
<li><a href="#">Algemeen</a></li>
<li><a href="#">Missie</a></li>
<li><a href="#">Visie</a></li>
<li><a href="#">Geschiedenis</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Resultaten</a></li>
<li><a href="#">Organisatie</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
</div><!-- Einde #nav -->

De css:
http://keeskluskens.nl/dump/websites/stp/style.css

Alvast bedankt!

[MoietyMe]

Zet de hover eens op de <ul> in plaats van op de <a>. Aangezien de rest van de linkjes ook in de <ul> zitten zou dit je probleem moeten oplossen.

Daarnaast zou je voor je plaatjes eens naar een sprite moeten kijken, dan heb je maar één plaatje en i.p.v. 8 declaraties 5.

Verder is de code nogal een rommeltje. Dit zou veel netter kunnen. Nu even geen tijd voor een voorbeeld, maar met alleen UL's, LI's en A's is dit prima mogelijk. De hover voor IE6 kun je dan oplossen met een .htc-bestand.

[ Voor 59% gewijzigd door MoietyMe op 20-08-2010 11:12 ]

[Bosmonster]

De UL's nesten ipv losse UL's maken. Is semantisch gezien een stuk correcter en lost direct je probleem op (in combinatie met wat Good Fella zegt dan natuurlijk, hovers op de LI's).

Zoek anders ook eens op suckerfish, dat is een voorbeeld van deze techniek.

[ Voor 17% gewijzigd door Bosmonster op 20-08-2010 11:13 ]

[SpaceK33z]

@GoodFella: Goed idee, zal ik eens proberen. Dat van die sprite is een goede tip, heb ik nog nooit in de praktijk gebruikt. Dankje voor je snelle antwoord .

Bosmonster schreef op vrijdag 20 augustus 2010 @ 11:12:
De UL's nesten ipv losse UL's maken. Is semantisch gezien een stuk correcter en lost direct je probleem op (in combinatie met wat Good Fella zegt dan natuurlijk, hovers op de LI's).

Zoek anders ook eens op suckerfish, dat is een voorbeeld van deze techniek.

Ook bedankt, zal ik eens proberen.

[ Voor 59% gewijzigd door SpaceK33z op 20-08-2010 11:14 ]

[MoietyMe]

Toch even een snel voorbeeld. De CSS moet je zelf maken.

HTML:

<ul id="menu">
    <li class="green">
        <a href="">Item 1</a>
        <ul>
            <li>
                <a href="">Subitem 1</a>
            </li>
            <li>
                <a href="">Subitem 2</a>
            </li>
            <li>
                <a href="">Subitem 3</a>
            </li>
            <li>
                <a href="">Subitem 4</a>
            </li>
        </ul>
    </li>
    <li class="yellow">
        <a href="">Item 2</a>
        <ul>
            <li>
                <a href="">Subitem 1</a>
            </li>
            <li>
                <a href="">Subitem 2</a>
            </li>
        </ul>
    </li>
    <li class="blue">
        <a href="">Item 3</a>
    </li>
    <li class="red">
        <a href="">Item 4</a>
    </li>
</ul>

[^Ripper]

"Zoek anders ook eens op suckerfish, dat is een voorbeeld van deze techniek."

http://www.cssplay.co.uk/menus/ <- in mijn ogen DE website voor CSS menu's

Erg veel soorten en maten en worden ge-update wanneer nodig.

[MoietyMe]

Hier een menu (CSS staat nog inline, maar dat is makkelijk te fixen) dat alleen CSS en een .htc-bestand gebruikt voor IE6.

Drop-line menu.

Getest in Safari 5, Firefox 3.6, Opera 10 en IE6 t/m 8.