DropDown Q6

by Joshua Powell

HTML

<div id="container">
    <div id="menu">
        <ul>
            <li class="highliteShadow"> <a href="index.php?page=home" title="Home pagina">
                            Home
                        </a>

                <div class="clear"></div>
            </li>
            <li class="highliteShadow"> <a href="#" title="Week 1">
                            Week 1 <i class="icon-arrow-right icon-white"></i>
                        </a>

                <ul>
                    <li> <a href="index.php?page=week_a" title="Opdrachten week 1">
                                    Opdracht 1
                                </a>

                    </li>
                    <li> <a href="/beheer/opdrachten/opdracht_a/index.html" title="Werkend voorbeeld opdracht 1" target="_blank">
                                    Werkend voorbeeld
                                </a>

                    </li>
                </ul>
                <div class="clear"></div>
            </li>
        </ul>
    </div>
</div>

CSS

body {
    background: #4b4b4b;
}

#container {
    background: mediumSeaGreen;
}

#container #menu ul {
    margin: 40px 0 40px 0;
    padding: 0px;
    width: 227px;
    list-style-type: none;
}
#container #menu ul li {
    margin: 0 0 5px 6px;
    height: 40px;
    list-style: none;
    background-image: url("../img/bg_header.png");
}
#container #menu ul li .picture {
    float: left;
    height: 40px;
    width: 40px;
    background-color: #787776;
}
#container #menu ul li:hover {
    opacity: 0.8;
    filter: alpha(opacity=60);
    /* Debug IE 8 and earlier */
    background-color: #000;
}
#container #menu ul li a {
    float: left;
    padding: 10px;
    width: 201px;
    color: #fff;
}
#container #menu ul li a:hover {
    text-decoration: none;
}
#container #menu ul ul {
    position: absolute;
    visibility: hidden;
    padding: 0px;
    margin: 0 0 0 221px;
}
#container #menu ul li:hover ul {
    visibility: visible;
}
#container #menu ul li ul li {
    -moz-box-shadow: 0 0 5px 0 #888;
    -webkit-box-shadow: 0 0 5px 0 #888;
    box-shadow: 0 0 5px 0 #888;
}
#container #menu ul li ul li:hover {
    opacity: 0.8;
    filter: alpha(opacity=60);
    /* Debug IE 8 and earlier */
    background-color: #000;
}
#container #menu ul li:hover ul li a {
    float: left;
    padding: 10px;
    color: #fff;
}