32. Menú vertical 4 niveles

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

CSS

* {
font-family:sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}
 
.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;
}
  
.nav li .flecha{
font-size: 9px;
padding-left: 6px;
display: none;
}
 .nav li a:not(:last-child) .flecha {
display: inline;
}