Foros del Web - Ver Mensaje Individual

GusleonP · #2 (**permalink**) 22/10/2013, 23:44

Hola...para lograr eso es mejor utilizar imágenes...te dejo el código arreglado y enlace a las imágenes, si quieres descargarlas o creas unas y las reemplazas...recuerda cambiar la ruta de las imágenes por las tuyas propias.

Codigo HTML

Cita:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>Menu desplegable usando solo CSS</title>

</head>
<body>
<ul class="nav">
<li> <a href="#">Home</a> </li>
<li class="padre"> <a href="#">Generalidades</a>
<ul>
<li> <a href="#">Cantón</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
<li><a href="#">Territorio</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
</ul>
</li>
<li class="padre"> <a href="#">Sitios Turismo</a>
<ul>
<li> <a href="#">Tipo de Turismo</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
<li><a href="#">Puntos Turisticos</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
</ul>
</li>
<li class="padre"> <a href="#">Tejido Productivo</a>
<ul>
<li> <a href="#">Categorias</a>
<ul>
<li><a href="#">Agricola</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
<li> <a href="#">Agropecuarias</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
<li> <a href="#">Artesanal</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">Producciones</a>
<ul>
<li><a href="#">Agricola</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
<li> <a href="#">Agropecuarias</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
<li> <a href="#">Artesanal</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="padre"><a href="#">Puntos de Riesgo</a>
<ul>
<li><a href="#">Detalle de Riesgo</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
<li><a href="#">Tipo de Riesgo</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
</ul>
</li>
<li class="padre"><a href="#">Usuario</a>
<ul class="no">
<li><a href="#">Cerrar Sesion</a></li>
</ul>
</li>
</ul>
</body>
</html>

Codigo CSS

Cita:

* {
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 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;
}

.nav .padre > a{background:url(https://www.ideasalvajes.com/flecha-abajo.png) center right no-repeat #FF6633;}
.nav .padre > a:hover{background:url(https://www.ideasalvajes.com/flecha-abajo.png) center right no-repeat #0fbfc6;}

.nav .padre ul li a{background:url(https://www.ideasalvajes.com/flecha-derecha.png) center right no-repeat #FF6633;}
.nav .padre ul li a:hover{background:url(https://www.ideasalvajes.com/flecha-derecha.png) center right no-repeat #0fbfc6;}
.nav .no a{background:#FF6633; background-image:none !important}

Esta es una solución rápida...lo único que debes hacer si agregas mas elementos es asignarle la clase no al ultimo ul del sub-menu, asi no mostrara la imagen de la flecha derecha.

Si quieres algo mas automatica ya tocaria jugar los last-child dentro del CSS.

Enlace imagen flecha abajo: https://www.ideasalvajes.com/flecha-abajo.png
Enlace imagen flecha abajo: https://www.ideasalvajes.com/flecha-derecha.png

Espero te sirva y recuerda guardar las imagenes en tu sitio pues estas las elimino en unos días de mi servidor.