[CSS] Horizontal list: dropdown in IE

[Verwijderd]

Ik gebruik de volgende html:

code:

<ul id="nav">
    <li><a href="#">Item</a>
        <ul>
            <li><a href="#">sub</a></li>
            <li><a href="#">sub</a></li>
            <li><a href="#">sub</a></li>
            <li><a href="#">sub</a></li>
        </ul>
    </li>
    <li><a href="#">Item</a>
    <li><a href="#">Item</a></li>
</ul>

Met deze CSS:

code:

#nav a {
    text-decoration: none; 
    font-size: 12px; 
    font-weight: bold; 
    color: #ffffff;
}
#nav a:hover {
    text-decoration: 
    none; font-size: 12px; 
    font-weight: bold; 
    color: #6e6e6e;
}
#nav ul {
    position: relative; 
    padding: 0; 
    margin: 0; 
    top: 0; 
    list-style: none;
}
#nav li {
    float: left; 
    position: relative; 
    list-style: none; 
    border: 1px solid black;
}
#nav li ul {
    display: none; 
    position: absolute; 
    top: 1em; 
    left: 0; 
    padding-bottom: 5px;
}
#nav li:hover ul, #nav li.sfhover ul {
    display: block; 
    left: 0;
}
#nav li ul li {
    list-style-image: url('/images/arrow.gif'); 
    padding: 10px 25px 0px 0px;
}
#nav li ul li a {
    font-weight: bold; 
    font-style: italic; 
    color: #6e6e6e;
}
#nav li ul li a:hover {
    font-weight: bold; 
    font-style: italic; 
    color: black;
}

In FF gaat het zonder problemen

Omdat IE geen :hover ondersteund op andere elementen dan A gebruik ik een klein javascriptje om de class "sfhover" te geven aan de li-elementen die dat nodig hebben. Dat werkt an sich:

code:

        sfHover = function() {
            var sfEls = document.getElementById("nav").getElementsByTagName("LI");
            for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                    this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
            }
        }
        if (window.attachEvent) window.attachEvent("onload", sfHover);

Het probleem ontstaat als ik een li-element een padding meegeef. Op het moment dat mn muis uit het eerste li gaat, klapt het subment weer in. Das niet zo handig, aangezien het wel de bedoeling is dat die li's een padding krijgen.

In CSS-ondersteunende browsers werkt 't prima, alleen voor IE moet de boel weer aangepast. Iemand een idee hoe ik dit een beetje netjes op kan lossen? Kan dit uberhaupt wel in IE, zonder een berg javascript te moeten gebruiken?

[KillR-B]

Verwijderd schreef op zaterdag 04 juni 2005 @ 00:06:Het probleem ontstaat als ik een li-element een padding meegeef. Op het moment dat mn muis uit het eerste li gaat, klapt het subment weer in. Das niet zo handig, aangezien het wel de bedoeling is dat die li's een padding krijgen.

Welke van de twee LI's in je stylesheet wil je een padding geven?
Als ik je code in IE6 uitvoer, klapt het submenu niet in (dus blijft gewoon open staan). Zowel als in IE als in FF krijg ik het zelfde resultaat te zien.

[ Voor 4% gewijzigd door KillR-B op 04-06-2005 00:35 ]

[bolleh]

probeer csshover.htc eens te gebruiken ipv je javascriptje
die kun je hier vinden met uitleg

[Verwijderd]

Ik heb 't geprobeerd met die .htc, maar kreeg gekke dingen: t werkte wel, maar na een muisklik niet meer. En nu is niet de tijd om uit te zoeken waarom dat is

Heb 't inmiddels opgelost door de padding op het a-element te zetten ipv het li-element:

code:

#nav li ul li a {padding: 13px 25px 0px 0px;}
#nav li ul li a:hover {padding: 13px 25px 0px 0px;}

Blijft vreemd verder, dat de snippet die ik poste wel werkt, maar het grotere geheel niet... Nouja, het is opgelost

[Verwijderd]

worden htc's niet als security issue beschouwd ?

zie ik dit nou fout ? je had net zo goed de hover op de A kunnen zetten want die zit er toch al.

[ Voor 22% gewijzigd door Verwijderd op 04-06-2005 10:35 ]