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

CSS* {
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}
.nav > li {
float:left;
}
.nav li a {
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 21%,#99b3c9 55%,#7db9e8 100%);
color:#000;
display:block;
border: 2px dotted #fff; 
border-radius: 5px;
padding:12px 12px;
 
}
.nav li a:hover {
background: linear-gradient(to bottom, #eaf4fc 0%,#ebe8f9 21%,#f9e8f0 55%,#e9f4fd 100%); 
  border-radius: 5px;
}
.nav li ul {
display:none;
position:absolute;
}
.nav li:hover > ul {
display:block;
}
.nav li ul li {
position:relative;
}
.nav li ul li ul {
right:-105px;
top:0;
}
.nav li .flecha{
font-size: 9px;
padding-left: 5px;
display: none;

}
.nav li a:not(:last-child) .flecha {
display: inline;
}