problemas con estilos de un menu dropdown

[AlexKurban]

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:

Código (html4strict) [Seleccionar] Expandir

<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 aqui la hoja de estilos:

Código (css) [Seleccionar] Expandir

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

[Usuario Invitado]

Código (css) [Seleccionar] Expandir

.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.

[AlexKurban]

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