[html/css] 3 lagen lijst (uitschuif)

[Stef]

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>