<style type="text/css">
    ul.menu {
        list-style-type: none;
        padding: 0;
    }
    ul.menu > li {
        display: block;
        border: 1px solid #000;
    }
    ul.menu > li > a {
        padding: 0 20px;
    }
    ul.menu > li ul {
        display: none;
        position: absolute;
        border: 1px solid #000;
        background-color: yellow;
        list-style-type: none;
        padding: 0;
    }
    ul.menu > li > ul > li > a {
        padding: 0 20px;
    }
    ul.menu > li:hover ul {
        display: block;
    }
</style>
<ul class="menu">
    <li>
         <a href="">Home</a>
         <ul>
              <li><a href="">1 - 1</a></li>
              <li><a href="">1 - 2</a></li>
              <li><a href="">1 - 3</a></li>
         </ul>
    </li>
    <li>
         <a href="">Catalog</a>
    </li>
    <li>
         <a href="">About</a>
    </li>
</ul>