Foro de elhacker.net

Hola a todos, queria pediros ayuda para poder estilizar un dropdown ya que llevo toda la noche con ello y ya no puedo mas... este seria el resultado final:

http://prntscr.com/7sswzm

y asi es como lo tengo yo de momento, ademas de que me el dropdown de la derecha no esta ajustado con la anchura:

http://prntscr.com/7sua3p


aqui esta el html5:

<ul class="menu">
                    <li><a href="#">&#1051;&#1070;&#1041;&#1054;&#1043;&#1054; &#1058;&#1048;&#1055;&#1040;<img src="img/drop_dark.png" id="tipo" alt=""></a>
                        <ul>
                            <li><a href="#compacta">&#1050;&#1054;&#1052;&#1055;&#1040;&#1050;&#1058;-&#1050;&#1040;&#1052;&#1045;&#1056;&#1040;</a></li>
                            <li><a href="#sinEspejo">&#1041;&#1045;&#1047;&#1047;&#1045;&#1056;&#1050;&#1040;&#1051;&#1068;&#1053;&#1040;&#1071;</a></li>
                            <li><a href="#espejo">&#1047;&#1045;&#1056;&#1050;&#1040;&#1051;&#1068;&#1053;&#1040;&#1071;</a></li>
                            <li><a href="#medioFormato">&#1057;&#1056;&#1045;&#1044;&#1053;&#1045;&#1060;&#1054;&#1056;&#1052;&#1040;&#1058;&#1053;&#1040;&#1071;</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="menu">
                    <li><a href="#marca">&#1051;&#1070;&#1041;&#1054;&#1043;&#1054; &#1041;&#1056;&#1045;&#1053;&#1044;&#1040;<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 aqui la hoja de estilos:

/* ==========================================================================
   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
   ========================================================================== */
 

socorro

.menu {
    box-shadow: 0 5px 8px rgba(0,0,0,.1);
}
.menu li {
    display: inline-block;
}
.menu a {
    border: none;
    color: #444;
    display: block;
    font-size: .85rem;
    padding: .5rem .65rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .2s ease-in;
}
.menu a:hover {
    color: #00bbff; /* cambia por el celeste de la imagen */
}

Te recomiendo primero que aprendas éstas cosas básicas antes de querer estilizar toda una web.

Hola, han sido una serie de errores de novato (y yo soy un novato) que los he solucionado ya. Muchas gracias de todas formas