34. Menú horizontal  4 niveles

Fuente: http://web.tursos.com/como-hacer-un-menu-desplegable-multinivel-usando-solo-css/

<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:Magneto;
list-style:none;
text-decoration:none;
border-radius: 15px;
margin:0;
padding:0;
}
 
.nav > li {
float:left;
}
.nav li a {
background-color:#edb4e9;
background-image: -moz-radial-gradient(-50% -79%, circle farthest-corner, #edb4e9, #d9b4c9 38%,rgba(240, 228, 235, 0.5) 62%,rgba(222, 213, 219, 0.4) 0%);
background-image: -webkit-radial-gradient(-50% -79%, circle farthest-corner, #edb4e9, #d9b4c9 38%,rgba(240, 228, 235, 0.5) 62%,rgba(222, 213, 219, 0.4) 0%);
background-image: -o-radial-gradient(-50% -79%, circle farthest-corner, #edb4e9, #d9b4c9 38%,rgba(240, 228, 235, 0.5) 62%,rgba(222, 213, 219, 0.4) 0%);
background-image: -ms-radial-gradient(-50% -79%, circle farthest-corner, #edb4e9, #d9b4c9 38%,rgba(240, 228, 235, 0.5) 62%,rgba(222, 213, 219, 0.4) 0%);
background-image: radial-gradient(-50% -79%, circle farthest-corner, #edb4e9, #d9b4c9 38%,rgba(240, 228, 235, 0.5) 62%,rgba(222, 213, 219, 0.4) 0%)
border-radius: 15px;
border: 1px dotted #8D0C59;
color:#000;
display:block;
padding:10px 12px;
}
 
.nav li a:hover {
background:#FDE8F4;
  border-radius: 5px;
}

.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;
}
.nav li .flecha{
font-size: 9px;
padding-left: 6px;
display: none;
}