-
17. Menú horizontal 2 niveles con imagen
<ul class="menu"> <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 class="submenu"> <li><a href="http://giffondosflashgloriav.eklablog.com/asiaticos-fondo-c26082288"> Fondo</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 class="submenu"> <li><a href="http://giffondosflashgloriav.eklablog.com/besos-fondo-c26866406"> Fondo</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 class="submenu"> <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>
CSS
/*Menu*/ .menu { position: absolute; top: 30px; left: 100px; height: 40px; } .menu li a {font-weight:600; text-decoration:none; padding:7px; display:block; color:#000; -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; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C6D6DE), to(#fff)); background: -webkit-linear-gradient(top, #D8A1AF, #C6D6DE); background: -moz-linear-gradient(top, #9587be, #dedddb); background: -ms-linear-gradient(top, #D8A1AF, #C6D6DE); background: -o-linear-gradient(top, #9587be, #C6D6DE); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#9587be', endColorstr='#dedddb')"; background: linear-gradient(#D8A1AF, #C6D6DE); border: 4px double #FAE5EC; border-radius: 5px; } .menu li a:hover, .menu li:hover > a{color:#ffffff; background:#E997B0; border: 2px solid #FAE5EC; border-radius: 5px;} /* hide the second level menu */ .menu ul {display: none; margin: 0; padding: 0; width: 150px; position: absolute; top: 43px; left: 0px; background: #ffffff; } /* display second level menu on hover */ .menu li:hover > ul{ display: block;} .menu > li { display: block; float: left; position: relative; } .menu ul li a { font-size:18px; font-weight:normal; display:block; background-color:#CFA5AB; border: 1px dotted #D666A7; border-radius: 5px; background-image:-webkit-linear-gradient(top, #F3C5D0 0%, #fff 90%); background-image: linear-gradient(to bottom, #F3C5D0 0%, #fff 90%); } .menu ul li a:hover, .menu ul li:hover > a{ background:#D7E7F0; border:2px solid #95BFD7; border-radius: 5px; color:#4083A9; } /* change level 3 menu positions */ .menu ul ul {left: 149px; top: 0px; margin: 3px 0px 0px 2px; } .mobile-menu{display:none; width:100%; padding:11px; background:#D666A7; position: static; left: auto; color:#; text-transform:uppercase; font-weight:600; } .mobile-menu:hover{background:#D666A7; color:#; left: auto; text-decoration:none; }