15. Menú horizontal con imagen 2 niveles
<div id="menubloque"> <ul id="menudesplegable"> <li><a href="http://giffondosflashgloriav.eklablog.com/bienvenido-c26050834"><img src="https://lh6.googleusercontent.com/-AZaKHmh0Qtc/U2-3fuk-ZCI/AAAAAAAAYiE/mcJionKRt8Q/w22-h32-no/3.gif" alt="" width="24" height="27" />Bienvenido</a></li> <li><a href="http://giffondosflashgloriav.eklablog.com/asiaticos-c26082286"><img src="http://www.canalgif.net/Gifs-animados/Etnias/Asia/Imagen-animada-Asia-60.gif" alt="" width="24" height="27" />Asiaticos</a> <ul> <li><a href="http://giffondosflashgloriav.eklablog.com/asiaticos-fondo-c26082288">Fondos</a></li> </ul> </li> <li><a href="http://giffondosflashgloriav.eklablog.com/besos-c26861444"><img src="http://www.apuntesytrabajos.es/ApuntesyTrabajos/images/gifANIMADOSsanVALENTIN/32.gif" alt="" width="28" height="27" /> Besos</a> <ul> <li><a href="http://giffondosflashgloriav.eklablog.com/besos-fondo-c26866406">Fondos</a></li> </ul> </li> <li><a href="http://giffondosflashgloriav.eklablog.com/corazon-c26053908"><img src="https://lh3.googleusercontent.com/-WIeSgwC6bfI/V0lKMEINllI/AAAAAAAB4fo/kN73vqzy-yMMCPJjydyx1g_WgtOCEfZPgCLcB/w426-h459/1.gif" alt="" width="27" height="27" />Corazón</a> <ul> <li><a href="http://giffondosflashgloriav.eklablog.com/corazon-flash-c26099626"> Flash</a></li> <li><a href="http://giffondosflashgloriav.eklablog.com/corazon-fondo-c26056844"> Fondo</a></li> <li><a href="http://giffondosflashgloriav.eklablog.com/corazon-gif-c26119178"> Gif</a></li> </ul> </li> </ul> </div>
CSS
/*Menu*/
#menubloque {
position: absolute;
top: 30px;
left: 100px;
height: 40px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#), to(#));
background: -webkit-linear-gradient(top, #, #);
background: -moz-linear-gradient(top, #, #);
background: -ms-linear-gradient(top, #, #);
background: -o-linear-gradient(top, #, #);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#9587be', endColorstr='#dedddb')";
background: linear-gradient(#, #);
border: px double #;
border-radius:;
padding:;
width: ;
height: 43px;
font-size: ;
color: #000;
padding: 0px auto 0;
font-weight: bold;
margin: 15px auto 0;
font-family:;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
#menudesplegable li {
margin: 0;
list-style: none;
padding: 0;
color:#fff;
background:#F7EEF1;
border: 1px dotted #BC677E;
border-radius: 5px;
}
#menudesplegable {
margin: 0;
padding: 0;
}
#menudesplegable ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
background: #;
}
#menudesplegable li a, #menudesplegable li a:link, #menudesplegable li a:visited {
color: #000;
display: block;
font-weight: normal;
padding: 9px 15px 8px;
text-transform: none;
margin: 0;
}
#menudesplegable li a:active, #menudesplegable li a:hover {
color: #fff;
background-color:#ECA2B8;
border: 1px dotted #D666A7;
border-radius: 5px;
background-image:-webkit-linear-gradient(top, #DB91A7 0%, #fff 90%);
background-image: linear-gradient(to bottom, #DB91A7 0%, #fff 90%);
text-decoration: none;
margin: 0;
padding: 9px 15px 8px;
}
#menudesplegable li li a:link, #menudesplegable li li a, #menudesplegable li li a:visited {
color: #FFF;
font-weight: normal;
text-transform: none;
background:#D7E7F0;
border-radius: 5px;
color:#4083A9;
width: 150px;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 2px solid #95BFD7;
border-top: 2px solid #95BFD7;
border-right: 1px solid #FFF;
border-left: 1px solid #FFF;
}
#menudesplegable li li a:hover, #menudesplegable li li a:active {
background:#F3D3E6;
color: #000000;
padding: 7px 10px;
}
#menudesplegable li {
float: left;
padding: 0;
}
#menudesplegable li ul a {
width: 140px;
}
#menudesplegable li ul {
position: absolute;
margin: 0;
z-index: 9999;
left: -999em;
height: auto;
width: 170px;
padding: 0;
}
#menudesplegable li:hover, #menudesplegable li.sfhover {
position: static;
}
#menudesplegable li ul ul {
margin: -33px 0px 0px 170px;
}
#menudesplegable li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#menudesplegable li:hover ul, #menudesplegable li li:hover ul, #nav li li.sfhover ul,#menudesplegable li li li:hover ul, #menudesplegable li.sfhover ul, #menudesplegable li li li.sfhover ul {
left: auto;
}