•  

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