27. Menú horizontal  4 niveles

<ul class="nav">
    <li><a href="">Home</a></li>
    <li><a href="">Servicios</a>
        <ul>
            <li><a href="">Diseno grafico</a></li>
            <li><a href="">Diseno web</a>
                <ul>
                    <li><a href="">Submenu 1</a></li>
                    <li><a href="">Submenu 2</a></li>
                    <li><a href="">Submenu 3</a></li>
                    <li><a href="">Submenu 4</a></li>
                    <li><a href="">Submenu 5</a></li>
                </ul>
            </li>
            <li><a href="">Marketing</a>
                <ul>
                    <li><a href="">Submenu 1</a></li>
                    <li><a href="">Submenu 2</a></li>
                    <li><a href="">Submenu 3</a>
                        <ul>
                            <li><a href="">Submenu 1</a></li>
                            <li><a href="">Submenu 2</a></li>
                            <li><a href="">Submenu 3</a></li>
                            <li><a href="">Submenu 4</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="">SEO</a></li>
        </ul>
    </li>
    <li><a href="">Acerca</a>
        <ul>
            <li><a href="">Historia</a></li>
            <li><a href="">Mision</a></li>
            <li><a href="">Vision</a></li>
        </ul>
    </li>
    <li><a href="">Contacto</a></li>
</ul>

CSS

* {
font-family:sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
 -webkit-transition: all .35s ease-in;
  transition: all .35s ease-in;

}
 
.nav > li {
float:left;
  
}
 
.nav li a {
background:#0c9ba0;
color:#FFF;
display:block;
border-radius: 10px; border: 4px double #fff;
padding:10px 12px;
}
 
.nav li a:hover {
background:#0fbfc6;
 

}
 
.nav li ul {
display:none;
position:absolute;
min-width:140px;
 
		
}
 
.nav li:hover > ul {
display:block;
}
.nav li ul li {
position:relative;
}
 
.nav li ul li ul {
right:-140px;
top:0;
	
}