aan alle goede dingen komt een eind, webmasterplein.net 2003 - 2013
wij danken jullie voor al mooie momenten die dankzij dit forum ontstonden - Derk, Rutger en Stef

[html/css] 3 lagen lijst (uitschuif)

Deel alles wat je delen kan, gebruik het voor opslag, plaats het omdat je er trots op bent of creƫer samen wat moois!

[html/css] 3 lagen lijst (uitschuif)

Berichtdoor Stef » 10 apr 2008 19:10

CSS:
Code: Selecteer alles
    /* parentlist */
    ul#parentlist {
       width: 100%;
       overflow: hidden;
       height: 50px;
    }

    ul#parentlist li a {
       display: block;
           float: left;
           padding: 0 6px;
       color: #2E3192;
    }

    /* childlist */
    ul#childlist {
       margin-top: 8px;
       background-color: #99CCFF;
       border: 4px solid white;
    }

    ul#childlist li a {
       width: 130px;
    }

    /* grandchildlist */
    ul#grandchildlist {
       background-color: #99CCFF;
       border: 4px solid white;
       border-top: 0;
    }

    ul#grandchildlist li a {
       width: 150px;
       float: none;
    }

    /* standaarden */
    li {
       position: relative;
    }

    li:hover {
       z-index: 1;
       cursor: pointer;
    }

    ul ul {
       position: absolute;
       display: none;
       left: 100px;
       top: 15px;
    }

    ul ul ul {
       left: 120px;
       top: 0;
    }

    li:hover ul ul {
       display: none;
    }

    li:hover ul, li:hover li:hover ul {
       display: block;
    }


Code: Selecteer alles
    <ul id="parentlist">
       <li><a href="#homepage">Homepage</a></li>
       <li><a href="#zwembaden">Zwembaden</a>
          <ul id="childlist">
             <li><a href="#verlichting">Verlichting</a>
                <ul id="grandchildlist">
                   <li><a href="#halogeen_verlichting">Halogeen verlichting</a></li>
                </ul>
             </li>
          </ul>
       </li>
       <li><a href="#saunas">Sauna's</a></li>
       <li><a href="#whirlpools">Whirlpools</a></li>
       <li><a href="#waterproducten">Waterproducten</a></li>
       <li><a href="#contact">Contact</a></li>
    </ul>
Avatar gebruiker
Stef
wmpr
 
Berichten: 5575
Geregistreerd: 27 nov 2003 21:51

Keer terug naar Snippets



cron