13. Menú horizontal con imagen HTML -

10.07.2016

13. Menú horizontal con imagen

HTML <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/bordes-c26728266">Bordes</a>
<ul class="submenu">
<li><a href="http://giffondosflashgloriav.eklablog.com/bordes-horizontales-c28542710"> Horizontales</a></li>
<li><a href="http://giffondosflashgloriav.eklablog.com/bordes-verticales-c28542712">Verticales</a></li>
</ul>
</li>
<li><a href="http://giffondosflashgloriav.eklablog.com/encaje-c26119336"><img src="https://lh3.googleusercontent.com/-ngVUeln58pY/V3ZaC795UNI/AAAAAAACHNs/wmf_0rqAUr4uH1G-1NNRhVRZ34FlYMx_QCLcB/s426/9.gif" alt="" width="20" height="20" />Encaje</a>
<ul class="submenu">
<li><a href="http://giffondosflashgloriav.eklablog.com/encaje-azul-c26119342"><img src="https://lh3.googleusercontent.com/-DCV_wLOlPgU/V3ZZnIy8kUI/AAAAAAACHLs/IFLQ-dDXrNsHp4HCqrR3lciJ9odcwypxgCL0B/s426/5.png" alt="" width="11" height="11" />Azul</a></li>
<li><a href="http://giffondosflashgloriav.eklablog.com/encaje-beis-c28527918"><img src="https://lh3.googleusercontent.com/-y6F3UmCRvAo/V3ZZ_m8iDDI/AAAAAAACHNI/crJs1-ZxIvc2Wl0vGpKQ8Aw6fc220TSYQCLcB/s426/8.png" alt="" width="11" height="11" />Beis</a></li>
<li><a href="http://giffondosflashgloriav.eklablog.com/encaje-rainbow-c26119350"><img src="https://lh3.googleusercontent.com/-ngVUeln58pY/V3ZaC795UNI/AAAAAAACHNs/wmf_0rqAUr4uH1G-1NNRhVRZ34FlYMx_QCLcB/s426/9.gif" alt="" width="11" height="11" />Multi</a></li>
</ul>
</li>
</ul>

CSS/*Menu*/ 
.menu {
position: absolute;
top: 14px;
left: 10px;
height: 60px;
}
.menu li {
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9587be), to(#dedddb));
   background: -webkit-linear-gradient(top, #9379D6, #FDF2B4);
   background: -moz-linear-gradient(top, #9587be, #dedddb);
   background: -ms-linear-gradient(top, #9379D6, #FDF2B4);
   background: -o-linear-gradient(top, #9587be, #FDF2B4);
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#9587be', endColorstr='#dedddb')";
   background: linear-gradient(#9379D6, #FDF2B4);

    border-bottom: 1px dotted #3D1C89;
    border-top: 2px solid #9B7ED8; 
    border-radius: 15px/25px;
    min-width: 15px;
}
.menu > li {
    display: block;
    float: left;
    position: relative;
}
.menu > li:first-child {
   border-radius: 15px/25px;
}
.menu a {
    border-left: 3px solid rgba(0, 0, 0, 0);
    color: #000;
    display: block;
    font-size:32px; 
    font-family: Parchment;
    line-height: 29px;
    padding: 0 25px;
    text-decoration: none;
   
}
.menu li:hover {
    background-color: #9379D6;
    background: -moz-linear-gradient(#fff, #A996C9);
    background: -ms-linear-gradient(#fff, #A996C9);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #A488EC), color-stop(100%, #5d5390));
    background: -webkit-linear-gradient(#fff, #A996C9);
    background: -o-linear-gradient(#fff, #A996C9);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A488EC', endColorstr='#5d5390');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#A488EC', endColorstr='#5d5390')";
    background: linear-gradient(#fff, #A996C9);

    border-bottom: 2px solid #3D1C89;
    border-top: 2px solid #fff;
}
.menu li:hover > a {
    border-radius: 5px 0 0 5px;
    border-left: 3px solid #634DBC;
    color: #A99CDE;
}
/* submenu styles */
.submenu {
    left: 0;
    max-height: 0;
    position: absolute;
    top: 100%;
    z-index: 0;

    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;
}
.submenu li {
    opacity: 0;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-transition: opacity .4s, -webkit-transform .5s;
    -moz-transition: opacity .4s, -moz-transform .5s;
    -ms-transition: opacity .4s, -ms-transform .5s;
    -o-transition: opacity .4s, -o-transform .5s;
    transition: opacity .4s, transform .5s;
}
.menu .submenu li:hover a {
    border-left: 3px solid #454545;
    border-radius: 0;
    color: #ffffff;
}
.menu > li:hover .submenu, .menu > li:focus .submenu {
    max-height: 2000px;
    z-index: 10;
}
.menu > li:hover .submenu li, .menu > li:focus .submenu li {
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}
/* CSS3 delays for transition effects */
.menu li:hover .submenu li:nth-child(1) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.menu li:hover .submenu li:nth-child(2) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.menu li:hover .submenu li:nth-child(3) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.menu li:hover .submenu li:nth-child(4) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.menu li:hover .submenu li:nth-child(5) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.menu li:hover .submenu li:nth-child(6) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.menu li:hover .submenu li:nth-child(7) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.menu li:hover .submenu li:nth-child(8) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}

.submenu li:nth-child(1) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}
.submenu li:nth-child(2) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.submenu li:nth-child(3) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.submenu li:nth-child(4) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.submenu li:nth-child(5) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.submenu li:nth-child(6) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.submenu li:nth-child(7) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.submenu li:nth-child(8) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}