Übung CSS3-Pseudoklassen

dabblet.css

/**
 * Übung CSS3-Pseudoklassen
 */


html, body {
    background: #FFF;
}
ul {
    font-size: 18px;
    list-style: none;
    float: left;
    margin: 0;
    padding: 0;
}
#navi > li {
    position: relative;
    float: left;
}
#navi > li a {
    display: block;
    padding: 8px 16px;
}
#navi > li ul {
    position: absolute;
    left: 0;
    display: none;
    width: 10em;
}
#navi > li:hover ul {
    display: block;
}

dabblet.html

<ul id="navi">
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Über uns</a></li>
    <li><a href="#">Philosophie</a></li>
    <li><a href="#">Leistungen</a></li>
    <li><a href="#">Unser Team</a>
        <ul>
            <li><a href="#">Rainer Zufall</a></li>
            <li><a href="#">Claire Grube</a></li>
            <li><a href="#">Armin Gips</a></li>
            <li><a href="#">Anna Bolika</a></li>
            <li><a href="#">Bill Yard</a></li>
            <li><a href="#">Klaus Thaler</a></li>
            <li><a href="#">Volker Putt</a></li>
        </ul>
    </li>
    <li><a href="#">Shop</a></li>
    <li><a href="#">Kontakt</a></li>
</ul>​

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}