Saludos amigos, solicito ayuda para mejorar este menu creado con css...
Código HTML:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>Menu desplegable usando solo CSS</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<ul class="nav">
<li>
<a href="#"><span class="icon icon-mid"><span class="icon-home"></span></span>Home<span class="flecha">▼</span></a> </li>
<li>
<a href="#"><span class="icon icon-mid"><span class="icon-home"></span></span>Generalidades<span class="flecha">▼</span></a>
<ul>
<li>
<a href="#">Cantón<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
</ul>
</li>
<li><a href="#">Territorio<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#"><span class="icon icon-mid"><span class="icon-image"></span></span>Sitios Turismo<span class="flecha">▼</span></a>
<ul>
<li>
<a href="#">Tipo de Turismo<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
</ul>
</li>
<li><a href="#">Puntos Turisticos<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Tejido Productivo<span class="flecha">▼</span></a>
<ul>
<li>
<a href="#">Categorias<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Agricola<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
</ul>
</li>
<li>
<a href="#">Agropecuarias<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
</ul>
</li>
<li>
<a href="#">Artesanal<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Producciones<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Agricola<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
</ul>
</li>
<li>
<a href="#">Agropecuarias<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
</ul>
</li>
<li>
<a href="#">Artesanal<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Puntos de Riesgo<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Detalle de Riesgo<span class="flecha_derecha">▼</span></a>
<ul>
<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
</ul>
</li>
<li><a href="#">Tipo de Riesgo<span class="flecha_derecha">▼</span></a>
<ul>
<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Usuario<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Cerrar Sesion<span class="flecha">▼</span></a></li>
</ul>
</li>
</ul>
</body>
</html>
este es el archivo style.css
Código:
* {
font-family:sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
font-size:12px;
}
.nav > li {
float:left;
}
.nav li a {
background: #FF6633;
color:#FFF;
display:block;
border:1px solid;
padding:10px 12px;
width:114px;
}
.nav li .flecha{
font-size: 9px;
padding-left: 6px;
display: none;
}
.nav li a:not(:last-child) .flecha {
display: inline;
}
.nav li a:hover {
background:#0fbfc6;
}
.nav li {
position: relative;
}
.nav li ul {
display:none;
position:absolute;
min-width:140px;
}
.nav li:hover > ul {
display:block;
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}
.nav li ul li ul {
right:-140px;
top:0;
width:100px;
}
Lo que deseo mejorar es que la flecha ▼ solo aparesca en el primer nivel del menu, y en las otras opciones que tienen sub-opciones aparesca la felcha indicando a la derecha.... algo similar al menu de este link:
http://cssplantillas.es.tl/formas-css.htm