Son of Suckerfish

Artikel: http://www.htmldog.com/articles/suckerfish/dropdowns/

by Jens Grochtdreis

HTML

<div class="hlist">
    <ul>
        <li><a href="#">geiler Blindtext</a></li>
        <li>
            <a href="#">Total toll</a>
            <ul class="sub1">
                <li><a href="#">Total toll</a></li>
                <li><a href="#">geiler Blindtext</a></li>
                <li>
                    <a href="#">Laaangweilig</a>
                    <ul class="sub2">
                        <li><a href="#">Total toll</a></li>
                        <li><a href="#">geiler Blindtext</a></li>
                        <li><a href="#">Laaangweilig</a></li>
                        <li><a href="#">suuuper!</a></li>
                        <li><a href="#">This is the end!</a></li>
                    </ul>
                </li>
                <li><a href="#">suuuper!</a></li>
                <li><a href="#">This is the end!</a></li>
            </ul>
        </li>
        <li><a href="#">Laaangweilig</a></li>
        <li><a href="#">suuuper!</a></li>
        <li><a href="#">This is the end!</a></li>
    </ul>
</div>

CSS

/* nur zur besseren Demonstration */
body { padding: 40px 10px; font-family: Verdana, Arial, sans-serif; font-size: 12px;} 
a { color: #000; text-decoration: none;}
a:hover, a:focus { color: #a20000; text-decoration: underline;}

/* =================== hier gehts mit dem Menü los! =================== */
.hlist, .hlist ul { 
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1;
}

/* zu überprüfen, ob wir die Breite benötigen */
.hlist a { display: block; width: 10em; }

/* zu überprüfen, ob wir die Breite benötigen */
/* Originalkommentar: width needed or else Opera goes nuts */
.hlist li { float: left; width: 10em; }

/* second-level lists */
/* Verstecken mittels Rausschieben, ansonsten lesen Screenreader den Inhalt nicht. */
.hlist li ul { position: absolute; width: 10em;left: -999em;}

/* third-and-above-level lists */
.hlist li ul ul {  margin: -1em 0 0 10em;}

.hlist li:hover ul ul, .hlist li.sfhover ul ul { left: -999em;}

/* lists nested under hovered list items */
.hlist li:hover ul, .hlist li li:hover ul, 
.hlist li.sfhover ul, .hlist li li.sfhover ul { left: auto;}

JavaScript

// http://www.htmldog.com/articles/suckerfish/dropdowns/
// http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones2.html


// braucht nur der IE6

/*

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);

*/