<div class="menu">
            <ul>
                <li><a href="#">Menú 1</a>
                    <ul>
                        <li><a href="#">Menú 1.1</a>
                            <ul>
                                <li><a href="#">Menú 1.1.1</a></li>
                                <li><a href="#">Menú 1.1.2</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Menú 1.2</a>
                            <ul>
                                <li><a href="#">Menú 1.2.1</a></li>
                                <li><a href="#">Menú 1.2.2</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Menú 2</a>
                    <ul>
                        <li><a href="#">Menú 2.1</a>
                            <ul>
                                <li><a href="#">Menú 2.1.1</a></li>
                                <li><a href="#">Menú 2.1.2</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Menú 2.2</a>
                            <ul>
                                <li><a href="#">Menú 2.2.1</a></li>
                                <li><a href="#">Menú 2.2.2</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Menú 3</a></li>
                <li><a href="#">Menú 4</a></li>
            </ul>
        </div>

        <style>
            .menu ul {
                list-style: none;
                padding: 0;
            }
            
            .menu a {
                display: block;
                width: 150px;
                height: 20px;
                background: red;
                color: white;
                text-decoration: none;
                text-align: center;
            }
            
            .menu a:hover {
                background: green;
            }
            
            .menu li li a {
                background: blue;
            }      
        </style>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $('.menu ul ul').css({
                    display:"none"
                });
       
                $('.menu li').hover(function(){
                    $(this).find('> ul').stop(true, true).slideDown('slow');
                }, function(){
                    $(this).find('> ul').stop(true, true).slideUp('slow');
                });
            });
        </script>