[SOLUCIONADO] Menu dropdown igualito que el de la foto

[alexkurban]

Hola a todos de nuevo, se que me vais a echar por hacer tantas preguntas noob pero ...
estoy intentando hacer este menu desplegable y no me sale

http://prntscr.com/7sswzm

tengo el html asi:

Código HTML:

<ul class="menu">
                    <li><a href="#">ЛЮБОГО ТИПА<img src="img/drop_dark.png" id="tipo" alt=""></a>
                        <ul>
                            <li><a href="#compacta">КОМПАКТ-КАМЕРА</a></li>
                            <li><a href="#sinEspejo">БЕЗЗЕРКАЛЬНАЯ</a></li>
                            <li><a href="#espejo">ЗЕРКАЛЬНАЯ</a></li>
                            <li><a href="#medioFormato">СРЕДНЕФОРМАТНАЯ</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="menu">
                    <li><a href="#marca">ЛЮБОГО БРЕНДА<img src="img/drop_dark.png" alt=""></a>
                        <ul>
                            <li><a href="#canon">CANON</a></li>
                            <li><a href="#nikon">NIKON</a></li>
                            <li><a href="#sony">SONY</a></li>
                            <li><a href="#fujifilm">FUJIFILM</a></li>
                            <li><a href="#samsung">SAMSUNG</a></li>
                            <li><a href="#olympus">OLYMPUS</a></li>
                            <li><a href="#panasonic">PANASONIC</a></li>
                            <li><a href="#polaroid">POLAROID</a></li>
                        </ul>
                    </li>
                </ul> 

y el css lo tengo asi:

Código HTML:

.menu,
.menu ul,
.menu li,
.menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

.menu ul{
    display: none;
}

.menu li {
    position: relative;
    padding-left: 10px;
    list-style: none;
    float: left;
    display: block;
    height: 30px;
}

.menu li a:hover{
    border: 1px solid #48F;
    background: rgba(68, 136, 255, .1);
}

.menu li a {
    display: block;
    padding-left: 10px;
    margin: 6px 0;
    line-height: 30px;
    text-decoration: none;
    border: 1px solid #393942;
}

.menu li a img{
    padding-bottom: 3px;
    padding-left: 10px;
    padding-right: 5px;
}

.menu li a img[id|="tipo"]{
    padding-left: 60px;
}

a[id|="pagar"]{
    text-decoration: none;
    margin-left: 70px;
    font-family: 'robotomedium';
    color: #fff;
}

en que estoy fallando?

[AngelKrak]

te hice una solucion rapida, aun que puede que otros te den otra mejor ;)

Código CSS:

.menu li:hover ul {
  display: block;
}
.menu li ul {
  display: none;
}
.menu li ul {
  position: absolute;
}
 

[alexkurban]

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?

[AngelKrak]

al ul.menu li > ul > li
cambiale el width por este:
width: 100%;

y para los bordes, agregale este CSS:

Código CSS:

ul.menu li ul a, ul.menu li ul a:hover {
  border: 0;
}
ul.menu li ul {
  border: 1px solid #ccc;
}
 

en esta clase ul.menu li > ul quitale el left: 0 y el top: 100%.

en esta otra clase ul.menu li > ul > li agregale un padding-left: 0px;.

y en esta otra clase ul.menu li > ul cambiale tu width: 100%; por width: 94.%;

[alexkurban]

Muchas gracias de nuevo! salio todo bien, fue un fallo mio por no revisar el tema de los porcentajes con el width... sabia que se podia ajustar sin necesidad de estar regulandolo con los pixels y de luego hacer 2 clases, muchas gracias