Hacer este menu responsive

[alexkurban]

Hola a todos, estoy intentando crear este menu responsive para pantallas tipo smartphone y ando muy perdido, este es el menu y el resultado final:

http://prntscr.com/7u0ex4

http://prntscr.com/7u0ell

y este es el codigo

Código HTML:

<div class="container12" id="menu">
        <div class="row">
            <div class="column2" id="logo"><img src="img/logo.png" alt=""></div><!-- Logo-->
            <div class="column2" id="tlf"><p>8 800 77 66 44</p></div><!-- tlf-->
            <div class="column5"><input type="search" placeholder="Busca tu Archivo" id="Buscador" /></div><!-- buscar-->
            <div class="column3" id="pago"><p>ОПЛАТА И ДОСТАВКА</p></div><!-- pago-->
        </div><!-- row-->

        <div class="row" id="sinEspacio" class="nav">
            <div class="column10" id="nav">
                <nav>
                    <ul>
                        <li><a href="#smartphone">МОБИЛЬНЫЕ ТЕЛЕФОНЫ</a></li>
                        <li><a href="#tablet">ПЛАНШЕТЫ</a></li>
                        <li class="active"><a href="#photo">ФОТОТЕХНИКА</a></li>
                        <li><a href="#notebooks">НОУТБУКИ</a></li>
                        <li><a href="#tv">ТЕЛЕВИЗОРЫ</a></li>
                    </ul>
                </nav>
            </div>
            <div class="column2"><a href="#" id="pagar"><img src="img/cart_white.png" id="carritoBlanco" alt="">PAGAR</a></div>
        </div>    
    </div><!-- container-->
    <!-- END MENU NAVIGATION-->
    
    <!-- DROP DOWN MENU -->
        <div class="container16">
            <div class="row">
                <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>
                <div class="column2" id="precios" style="text-align: right"><p id="description">ПО ЦЕНЕ</p></div>
                <div class="column6">
                    <form> 
                        <input type="text" name="min" placeholder="ОТ">
                        <input type="text" name="max" placeholder="ДО">
                    </form>
                </div>
                <div class="column2" id="precios" style="text-align: left"><p id="description">РУБЛЕЙ</p></div>
            </div>
        </div>
    <!-- END DROPDOWN MENU--> 

estoy mirando tutoriales y intentando recabar información y lo veo negro... si pudieras echarme una mano os lo agradeceria mucho...