simple drop down menu

by Gustavo Carvalho

HTML

<body scroll="no">
<nav class="tabArea">
    <ul>
        <li><a href="#">Menu 1</a>
            <ul>
                <li><a href="#">menu 1.1</a></li>
                <li><a href="#">menu 1.2</a></li>
                <li><a href="#">menu 1.3</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 2</a>
            <ul>
                <li><a href="#">menu 2.1</a></li>
                <li><a href="#">menu 2.2</a></li>
                <li><a href="#">menu 2.3</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 3</a>
            <ul>
                <li><a href="#">menu 3.1</a></li>
                <li><a href="#">menu 3.2</a></li>
                <li><a href="#">menu 3.3</a></li>
            </ul>
        </li>
    </ul>
</nav>
</body>

CSS

body {
    overflow: hidden;
}
.tabArea ul {
    list-style: none;
}

.tabArea li a {
    color: #000000;
    display: block;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
}

.tabArea li {
    float: left;
}

.tabArea li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: 160px;
    width: 170px;
}
.tabArea li ul a {
    width: 180px;
}

.tabArea li:hover ul, .tabArea li li:hover ul, .tabArea li li li:hover ul {
    left: -30px;
}
.tabArea li:hover, .tabArea li.sfhover {
    position: relative;
}

.tabArea li li a, .tabArea li li a:link, .tabArea li li a:visited {
    z-index:9999;
}