tab menu

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">

* {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    font-size: 1em;
}
    /* a 태그에 밑줄을 없앤다 */
    a {
        text-decoration: none;
    }
    .nav {
        width: 600px;
    }
        ul {
            width: 100%;
        }
            ul li {
                width: 150px;
                line-height: 40px;
                text-align: center;
                position: relative;
                float: left;
            }
                /* ul li 태그 안에 있는 모든 a 태그 */
                ul li a {
                    width: 100%;
                    color: white;
                    background: black;
                    float: left;
                }
                /* a 태그에 마우스를 올렸을 때 배경색상이 변경 */
                ul li a:hover {
                    background: #666;
                }
                /* ul li 안에 div 태그가 "drop" 이라는 클래스를 가진 태그 */
                ul li div.drop {
                    width: 100%;
                    position: absolute;
                    left: 0;
                    top: 40px;
                    display: none;
                }

                /* ul li 태그에 마우스를 올렸을 때 드롭다운 메뉴가 보여진다 */
                ul li:hover div.drop {
                    display: block;
                }
                /* 메인 메뉴에 포커스를 가졌을 때 드롭다운 메뉴가 보여진다 */
                ul li a:focus ~ div.drop {
                    display: block;
                }

</style>
<title>Untitled Document</title>
</head>

<body>

    <div class="nav">
        <ul>
            <li>
                <a href="#">MENU 1</a>
                <div class="drop">
                    <a href="#">메인 1 - 서브 1</a>
                    <a href="#">메인 1 - 서브 2</a>
                    <a href="#">메인 1 - 서브 3</a>
                </div>
            </li>
            <li>
                <a href="#">MENU 2</a>
                <div class="drop">
                    <a href="#">메인 2 - 서브 1</a>
                    <a href="#">메인 2 - 서브 2</a>
                    <a href="#">메인 2 - 서브 3</a>
                    <a href="#">메인 2 - 서브 4</a>
                    <a href="#">메인 2 - 서브 5</a>
                </div>
            </li>
            <li>
                <a href="#">MENU 3</a>
                <div class="drop">
                    <a href="#">메인 3 - 서브 1</a>
                    <a href="#">메인 3 - 서브 2</a>
                    <a href="#">메인 3 - 서브 3</a>
                    <a href="#">메인 3 - 서브 4</a>
                </div>
            </li>
            <li>
                <a href="#">MENU 4</a>
                <div class="drop">
                    <a href="#">메인 4 - 서브 1</a>
                    <a href="#">메인 4 - 서브 2</a>
                </div>
            </li>
        </ul>
    </div>

</body>
</html>