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