Estas en todas eh xD estuve trasteando un poco y logre hacer algo pero muy muy primitivo con este css;
Código HTML:
/* ==========================================================================
MENU DROPDOWN
========================================================================== */
ul.menu,
ul.menu ul,
ul.menu li,
ul.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
ul.menu{
margin:6px 0;
}
ul.menu li {
position: relative;
padding-left: 10px;
list-style: none;
float: left;
display: block;
height: 30px;
}
ul.menu li a {
display: block;
padding-left: 10px;
margin: 0;
line-height: 30px;
text-decoration: none;
border: 1px solid #393942;
}
ul.menu li a:hover{
border: 1px solid #48F;
background: rgba(68, 136, 255, .1);
}
ul.menu li a img{
padding-bottom: 3px;
padding-left: 10px;
padding-right: 5px;
}
ul.menu li a img[id|="tipo"]{
padding-left: 60px;
}
a[id|="pagar"]{
text-decoration: none;
margin-left: 70px;
font-family: 'robotomedium';
color: #fff;
}
ul.menu li > ul{
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
display: inline-block;
}
ul.menu li:hover > ul{
visibility: visible;
opacity: 1;
}
ul.menu li > ul > li{
width: 196px;
background: #fff;
}
/* ==========================================================================
END MENU DROPDOWN
========================================================================== */
el resultado no esta saliendo como yo esperaba;
http://prntscr.com/7sua3p
aun tengo que alinear los 2 dropdowns para que sean de la misma anchura y quitarles el borde ese... ideas?