HTML<ul class="menu">
    <li><a href=#>Menú 1</a>
        <ul class="submenu">
            <li><a href=#>Submenú 1</a></li>
            <li><a href=#>Submenú 1</a></li>
            <li><a href=#>Submenú 1</a></li>
        </ul>
    </li>
    <li><a href=#>Menú 2</a>
        <ul class="submenu">
            <li><a href=#>Submenú 2</a></li>
            <li><a href=#>Submenú 2</a></li>
            <li><a href=#>Submenú 2</a></li>
        </ul>
    </li>
    <li><a href=#>Menú 3</a>
        <ul class="submenu">
            <li><a href=#>Sudmenú 3</a></li>
            <li><a href=#>Sudmenú 3</a></li>
            <li><a href=#>Sudmenú 3</a></li>
        </ul>
    </li>
    <li><a href=#>Menú 4</a>
        <ul class="submenu">
            <li><a href=#>Sudmenú 4</a></li>
            <li><a href=#>Sudmenú 4</a></li>
            <li><a href=#>Sudmenú 4</a></li>
        </ul>
    </li>
    <li><a href=#>Menú 5</a>
        <ul class="submenu">
            <li><a href=#>Sudmenú 5</a></li>
            <li><a href=#>Sudmenú 5</a></li>
            <li><a href=#>Sudmenú 5</a></li>
        </ul>
    </li>
</ul>

CSS body {
    font: 14px 'Verdana';
    margin: 0;
    padding: 0;
}
ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul:after {
    display: block;
    content: ' ';
    clear: both;
    float: none;
}
ul.menu > li {
    float: left;
    position: relative;
}
ul.menu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.menu > li > a:hover {
    background-color: black;
}
ul.submenu {
    display: none;
    position: absolute;
    width: 120px;
    top: 37px;
    left: 0;
    background-color: white;
    border: 1px solid red;
}
ul.submenu > li {
    display: block;
}
ul.submenu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.submenu > li > a:hover {
    text-decoration: underline;
}
ul.menu > li:hover > ul.submenu {
    display: block;
}