Test Foro de elhacker.net SMF 2.1

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="#">ЛЮБОГО ТИПА<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:

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