Stylize search

Question

I need help to develop an advanced search style, like Zap Real Estate (in mobile mode). I created all the structure of HTML as the site itself, but I feel difficulties in parts of the stylization and functions of the menu, for this reason I ask for help.

HTML structure

<ul class="filtros_principais">

        <li>
            <label id="lb_faixa_preco" class="icon_faixa_preco">FAIXA DE PREÇO?
                <span>&blacktriangledown;</span>
            </label>
            <div id="dfaixa_preco" data-filtro="slider" style="display: none;">
                <span>Faixa de preço R$</span>
                <div id="box_slide_preco">
                    <ul>
                        <li>
                            <input type="text" id="typeprecomin" value="0" maxlength="11"/>
                        </li>

                        <li>
                            <span>até</span>
                            <span></span>
                        </li>

                        <li>
                            <input type="text" id="typeprecomax" maxlength="11">
                        </li>

                    </ul>

                    <div id="slide_busca_preco">
                        <div>
                            <div>

                                <div>

                                </div>

                            </div>

                            <div>

                                <div>

                                </div>

                            </div>
                        </div>
                    </div>

                    <span>ou</span>
                    <span id="sbuscaporparcela">Buscar por parcela</span>

                </div>
            </div>

            <div id="dbusca_por_parcela" style="display: none;">

                <span class="titulo">Buscar por parcela</span>

                <div>

                    <div>
                        <label for="cvalor_entrada">Valor de entrada</label>
                        <input id="cvalor_entrada" type="text" placeholder="R$ 0" maxlength="11">
                    </div>

                    <div>

                        <label for="cvalor_entrada">Valor de entrada</label>
                        <input id="cvalor_entrada" type="text" placeholder="R$ 0" maxlength="11">
                    </div>

                    <div>

                        <label for="cvalor_entrada">Valor de entrada</label>
                        <input id="cvalor_entrada" type="text" placeholder="R$ 0" maxlength="11">
                    </div>

                    <div>

                        <label for="cvalor_entrada">Valor de entrada</label>
                        <input id="cvalor_entrada" type="text" placeholder="R$ 0" maxlength="11">
                    </div>

                    <div>

                        <label for="cvalor_entrada">Valor de entrada</label>
                        <input id="cvalor_entrada" type="text" placeholder="R$ 0" maxlength="11">
                    </div>

                </div>

                <input type="hidden" id="hd_modulo_novo" value="false">

            </div>

        </li>

        <li>

            <label id="lbquarto">QUARTOS
            <span>&blacktriangledown;</span>
            </label>

            <div id="dquarto" style="display: none;">

                <span class="titulos">quartos</span>

                <ul>

                    <li>

                        <input type="checkbox" id="quarto1" value="1">
                        <label for="quarto1">1</label>

                    </li><li>

                        <input type="checkbox" id="quarto2" value="2">
                        <label for="quarto2">2</label>

                    </li><li>

                        <input type="checkbox" id="quarto3" value="3">
                        <label for="quarto3">3</label>

                    </li>

                    <li>

                        <input type="checkbox" id="quarto4" value="4">
                        <label for="quarto4">4 ou mais</label>

                    </li>

                </ul>

            </div>

        </li>

        <li>

            <label id="lbsuite">SUÍTES
            <span>&blacktriangledown;</span>
            </label>

            <div id="dsuite" style="display: none;">

                <span class="titulo">Suítes</span>

                <ul>

                    <li>
                        <input type="checkbox" id="suite1">
                        <label for="suite1">1</label>
                    </li><li>
                        <input type="checkbox" id="suite2">
                        <label for="suite2">2</label>
                    </li><li>
                        <input type="checkbox" id="suite3">
                        <label for="suite3">3</label>
                    </li>

                    <li>
                        <input type="checkbox" id="suite4">
                        <label for="suite4">4 ou mais</label>
                    </li>

                </ul>
            </div>
        </li>

        <li>
            <label id="lbvaga">
                <span>&blacktriangledown;</span>
            </label>

            <div id="dvaga" style="display: none;">

                <span class="titulo">Vagas</span>

                <ul>

                    <li>
                        <input type="checkbox" id="vaga1" value="1">
                        <label for="vaga1">1</label>
                    </li><li>
                        <input type="checkbox" id="vaga2" value="2">
                        <label for="vaga2">2</label>
                    </li><li>
                        <input type="checkbox" id="vaga3" value="3">
                        <label for="vaga3">3</label>
                    </li>

                    <li>
                        <input type="checkbox" id="vaga4" value="4">
                        <label for="vaga4">4</label>
                    </li>

                </ul>

            </div>

        </li>

        <li>

            <label id="lbfaixaarea">
                <span>&blacktriangledown;</span>
            </label>

            <div id="dfaixaarea" style="display: none;">
                <span class="titulo">Área (m"<sup>2</sup>")"</span>

                <div id="box_busca">

                    <ul>

                        <li>
                            <input type="text" id="typearea_min_avan" maxlength="6" pattern="\d*">
                        </li>

                        <li class="spacer-slider">
                            <span class="spacer-left"></span>
                            até
                            <span class="spacer-right"></span>
                        </li>

                        <li>
                            <input type="text" id="typearea_max_avan" maxlength="6" pattern="\d*">
                        </li>

                    </ul>

                    <div id="slider_busca_min_area">

                        <div>

                            <div style="left: 0%;">

                                <div>

                                </div>

                            </div>

                            <div style="left: 100%;">

                                <div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </li>

    </ul>

    <div id="filtros_secundarios">

        <label>O que você busca em um imóvel?</label>
        <div id="dpalavra_chave">
            <input id="palavra_chave" type="text" placeholder="Ex: rua, piscina, churrasqueira..." autocomplete="off" maxlength="40"/>
            <button type="button" id="busca_pchave">+</button>

            <div id="tipo_anuncio">

               <label>Exibir apenas anúncios:</label>

                <ul>

                   <li>
                       <input type="checkbox" id="chkbusca_avan_fotos" name="chkbusca_avan_f01"/>
                       <label for="chkbusca_avan_fotos">Com fotos</label>
                   </li>

                <li>
                    <input type="checkbox" id="chkbusca_avan_end" name="chkbusca_avan_e01">
                    <label>Com endereço</label>
                </li>

                <li>

                    <input type="checkbox" id="chkbusca_avan_distrato" name="chkbusca_avan_d01">
                    <label>"Oportunidades | Revendas"</label>

                </li>

               </ul>
            </div>

            <label>Código do imóvel</label>
        <div id="dcodigo_imovel">
            <input id="codigo_imovel" type="text" placeholder="Digite o código (ex: IM00000)" autocomplete="off" maxlength="40"/>
            <button type="button" id="busca_codigo">OK</button>

        </div>

    </div>

    </div>