[css] dropdown wil niet uitvouwen (specificity?)

[b19a]

Ik heb het volgende:

HTML:

    <ul>
        <li>[img]"images/format_smiley.gif"[/img]
            <ul>
                <li>[img]"images/format_smiley.gif"[/img]</li>
                <li>[img]"images/format_smiley.gif"[/img]</li>
                <li>[img]"images/format_smiley.gif"[/img]</li>
                <li>[img]"images/format_smiley.gif"[/img]</li>
                <li>[img]"images/format_smiley.gif"[/img]</li>
                <li>[img]"images/format_smiley.gif"[/img]</li>
            </ul>
        </li>
        <li>[img]"images/format_font.gif"[/img]
            <ul>
                <li>Verdana</li>
                <li>Helvetica</li>
                <li>Times</li>
            </ul>
        </li>
        <li>[img]"images/format_bold.gif"[/img]</li>
        <li>[img]"images/format_under.gif"[/img]</li>
        <li>[img]"images/format_italic.gif"[/img]</li>
    </ul>

Cascading Stylesheet:

        ul {
            padding: 0;
            margin: 0;
            list-style: none;
            background-color:#f5f5f5;
            height: 24px;
        }
        ul li {
            margin:0;
            display:inline;
            position:relative;
        }
        ul li ul {
            background-color:#f5f5f5;
            position: absolute;
            top: 27px;
            left: 0px;
            border: 1px solid #aaa;
            display:none;
            padding: 5px;
            height: auto;
            width: 158px; }
        ul li>ul {
            top: 14px;
            left: auto;}

        ul li:hover ul {
            display: block; }
    
        ul li ul li {
            margin: 2px;
            display: inline; }

Overige css:

Cascading Stylesheet:

        ul li img {
            padding:1px 1px;
        }
        ul li img:hover {
            border: 1px solid #aaa;
            background-color: #ddd;
            padding:0;
        }
        ul li ul li img {
            padding: 2px; }
        ul li ul li img:hover{
            border: 1px solid #aaa;
            background-color: #ddd;
            padding: 1px;
        }

Het enige probleem is dat het menu niet wil uitvouwen. Toen ik het wel 1x voor elkaar kreeg kon ik aan de ul in het hoogste nivo geen id/class meer koppelen omdat dat het uitvouwen weer kapot maakte.
Ik vermoed dat het iets met css specificity te maken heeft, maar ik heb verschillende opzetten geprobeerd en geen enkele wilde werken. Zodra je je muis dan wilde verplaatsen naar het uitgevouwde menu verdween het weer.

Note: momenteel ben ik alleen aan het werk in mozilla firefox, IE ondersteuning komt er later nog bij.

Online casus
Download casus

css specificity info

[ Voor 40% gewijzigd door b19a op 03-12-2004 14:48 . Reden: verduidelijking ]

[Woudloper]

Dat hij niet uitvouwt is een probleem bij Internet Explorer. Mocht je het daar wel werkend willen krijgen moet je eens zoeken naar CSSHover van Clay.

/edit:

zie hier voor een uitleg ervan op zijn eigen site. Verder kan je dit oude draadje nog eens doorlezen voor wat achtergrond informatie.

[ Voor 47% gewijzigd door Woudloper op 03-12-2004 14:48 ]

[b19a]

Woudloper schreef op vrijdag 03 december 2004 @ 14:46:
[..]

Bedankt voor je reactie, maar (laatste edit van me) ik ben aan 't prutsen met firefox, dus IE-problemen hoef ik pas naar te kijken als het onder ff werkt.

[Woudloper]

Aha, ik zie het nu ook. Ik kan in jouw online testcase geeneens op het 2^de niveau komen. Kan je wellicht niet eens even kijken op die site van Clay (csshover) aangezien het daar gewoon wel werkt. Naar mijn idee zit er wat fout in de CSS.

[b19a]

Beste Woudloper, hartelijk dank voor je tips+links. Ik heb inmiddels de behavior gebruikt voor IE en werkt goed. De css van Peter (link) werkt goed.

Mijn menu ziet er nu zo uit: Testcase 3: bijna klaar

Het enige probleem wat ik nog heb is een uitgezakte border in IE, je ziet dat de border aan de onderkant van de images 2 a 3 pixels te ver door loopt. Zou dit nog te verhelpen zijn?

/edit:

Hmm nog een bug die me nu pas opvalt. Als je een submenu opent dan heeft de parent geen hover meer. Dit komt omdat de parent geen hoverstate heeft, maar de img in de parent wel (dit is gedaan omdat een border om een li met img nogal bugt zie andere topic). Is er een simpele manier om de hoverstate te faken of te corrigeren? Of zal ik daar een javascriptje voor moeten schrijven?

[ Voor 32% gewijzigd door b19a op 03-12-2004 16:01 . Reden: 2e bug gevonden ]

[Woudloper]

Helaas, als je het mij vraagt is ombouwen naar li:hover het enige werkende devies hiervoor. Heb er zelf ook nog meer lopen stoeien, maar kan het alleen maar werkende krijgen met behulp van li:hover ipv li a:hover.

[b19a]

Hmm ik ben niet voor 1 bug te vangen .

PHP:

// menu vervangen door de gewenste ul-id
window.onload = function() { fixDropDowns('menu'); }

    fixDropDowns = function(objname)
    {
        var parent,i,child,subchild;
        parent=document.getElementById(objname);
        i=parent.childNodes.length;
        while(i--)
        {
            child=parent.childNodes[i];
            j=child.childNodes.length;
            while(j--)
            {
                subchild=child.childNodes[j];
                if(subchild.tagName=='UL')
                {
                    // IE luistert natuurlijk niet naar addEventListener
                    if(document.all&&document.getElementById)
                    {
                        subchild.onmouseover= function(){ this.parentNode.childNodes[0].className+=" selected"; };
                        subchild.onmouseout = function(){ this.parentNode.childNodes[0].className = this.parentNode.childNodes[0].className.replace((new RegExp('selected')),''); };
                    }
                    else
                    {
                        subchild.addEventListener('mouseover', function(){ this.parentNode.childNodes[0].className+=" selected"; }, false);
                        subchild.addEventListener('mouseout', function(){ this.parentNode.childNodes[0].className = this.parentNode.childNodes[0].className.replace((new RegExp('selected')),''); }, false);
                    }
                }
            }
        }
    }

Deze code zal bij een onmouseover op een child de eerste childNode van de parent de classname "selected" geven. (Zelfde idee als die behavior voor :hover).

HTML:

<ul id="menu">
    <li>
        <a href="#">Item 1</a>
        <ul>
            <li><a href="#">Item 1.1</a></li>
        </ul>
    </li>
</ul>

Als je nu op Item 1.1 gaat staan zou item 1 dus een classname "selected" moeten krijgen, welke dus eenvoudig valt te css'en:

Cascading Stylesheet:

a.selected {
    border: 1px solid black;
}

Let wel dat deze code maar tot 1 level diep gaat; mocht je het anders willen vraag me of code 't zelf .

[ Voor 24% gewijzigd door b19a op 04-12-2004 18:21 . Reden: kleine additie ]

[Woudloper]

Interessante oplossing, echter omschrijf je het geheel als een bug. Ik denk echter niet dat het een bug is, maar gewoon de manier waarop dit opgelost kan worden middels HTML en CSS.

Het 2^de niveau van het list-menu is namelijk geen child van de A tag. Het 2^de (UL LI) niveau is een child van het eerste listitem binnen de unnumbered list...

[b19a]

mjah okey dat is waar ... nou vooruit... "voor 1 beperking ben ik niet te vangen".