Dropdown Menu

by Lukkiey

HTML

<ul class="nav menu" id="nav">
    <li class="item-101 current active"><a href="/joomla3/">Home</a>

    </li>
    <li class="item-112 deeper parent"><a href="#">Over ons</a>

        <ul class="nav-child unstyled small">
            <li class="item-114"><a href="#">Nieuws</a>

            </li>
            <li class="item-116"><a href="#">Klanten</a>

            </li>
            <li class="item-117"><a href="#">Foto's</a>

            </li>
        </ul>
    </li>
    <li class="item-108 deeper parent"><a href="#">Portfolio</a>

        <ul class="nav-child unstyled small">
            <li class="item-110 deeper parent"><a href="#">Huizen</a>

                <ul class="nav-child unstyled small">
                    <li class="item-109"><a href="#">Villa's</a>

                    </li>
                    <li class="item-111"><a href="#">Appartementen</a>

                    </li>
                </ul>
            </li>
            <li class="item-122"><a href="#">Kantoren</a>

            </li>
            <li class="item-123"><a href="#">Schoolgebouwen</a>

            </li>
            <li class="item-124"><a href="#">Overheidsgebouwen</a>

            </li>
            <li class="item-125"><a href="#">Winkels</a>

            </li>
            <li class="item-127"><a href="#">Sportgebouwen</a>

            </li>
        </ul>
    </li>
    <li class="item-129"><a href="#">Contact</a>

    </li>
</ul>

CSS

/*######
Navigatie
######*/
 #nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    height: 40px;
    float: left;
    margin-left: 58px;
    margin-top: 33px;
    width: 800px;
    background: #111;
    background: -moz-linear-gradient(top, #333, #111);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#111));
    border-radius: 5px 5px 5px 5px;
}
#nav ul {
    background-color: red;
    border:1px solid red;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    left: -999em;
    overflow: hidden;
    padding: 20px 0 10px;
    position: absolute;
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -moz-transition: -moz-transform 0.2s linear;
    -ms-transition: -ms-transform 0.2s linear;
    -o-transition: -o-transform 0.2s linear;
    -webkit-transition: -webkit-transform 0.2s linear;
    transition: transform 0.2s linear;
}
#nav li {
    margin-top: 5px;
    margin-left: 5px;
    float: left;
    position: relative;
}
#nav li a {
    color: #FFFFFF;
    display: block;
    font-size: 14px;
    padding: 7px 20px;
    text-decoration: none;
}
#nav li:hover > a {
    background: #e73534;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
}
#nav li.parent:hover > a {
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
#nav li:hover > a.hsubs {
    border-radius: 5px 5px 0 0;
}
#nav li:hover ul.nav-child {
    left: 0;
    top: 30px;
    min-width: 180px;
    width: auto;
    background: #e01b1a;
    background: -moz-linear-gradient(top, #e73534, #e01b1a);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e73534), to(#e01b1a));
    margin: 0;
    padding: 5px 0;
 ...