CSS Dropdown Menu

#menu ul, #menu li {
    font-family: Verdana;    /* The selected menu font */
    font-size: 10px;         /* Font-size used throughout the menu */
    list-style-type: none;   /* Remove unwanted default list-style */
    margin: 0;               /* Remove all margins */
    padding: 0;              /* Remove all padding */
}
#menu ul {
    float: right;            /* Right align the list menu */
}
#menu li {
    background: #CCC;        /* Item background color */
    display: block;          /* Make sure list items are displayed as blocks */
    float: left;             /* Float the list items */
    line-height: 30px;       /* Item height, also vertically center aligns the link text */
    position: relative;      /* Needed to position sub menus correctly */
    width: 100px;            /* Item width */
}
#menu ul ul {
    overflow: hidden;        /* Force ul stretch */
    position: absolute;      /* Needed to position sub menus correctly */
    top: 30px;               /* Set to same height as top level menu */
    visibility: hidden;      /* Hide the sub menu */
}
#menu ul ul li, #menu ul ul li a {
    width: 150px;
}
#menu ul li:hover {
    background: #999;        /* Top level background color on sub menu hover */
}
#menu ul li:hover a {
    color: #000;             /* Top level text color on sub menu hover */
}
#menu ul li:hover ul {
    visibility: visible;     /* Display the sub menu */
}
#menu a {
    padding: 0 15px;         /* Determine the "size" of the link blocks */
    display: block;          /* Ensure the links generate block boxes to wich padding can be applied */
}
#menu a:hover, #menu a:active {
    background: #999;        /* Change background color on hover */
    color: #000;             /* Text color */
    outline: 0;              /* Remove the outline border */
}

<div id="menu">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a>
            <ul>
                <li><a href="#">2.1</a></li>
                <li><a href="#">2.2</a></li>
            </ul>
        </li>
        <li><a href="#">3</a>
            <ul>
                <li><a href="#">3.1</a></li>
                <li><a href="#">3.2</a></li>
                <li><a href="#">3.3</a></li>
            </ul>
        </li>
        <li><a href="#">4</a></li>
    </ul>
</div>