Dropdown menu does not adjust the screen

Question

I have a dropdown button that serves as a menu of the site, only it stays in the right corner of the site and ends up leaving the screen, follow print of the problem:

I want it to stay inside the screen, without creating a horizontal scroll bar because of the menu. The site is responsive, so in case it has to adjust the screen.

Here is the code: html:

<div class="dropdown">
                        <button type="button" class="botao" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            <div class="botao_dropdown">
                                <i class="fa fa-bars" style="font-size: 1.5em;"></i>
                            </div>
                        </button>
                        <ul class="dropdown-menu estilo_dropdown" aria-labelledby="dropdownMenu1">
                            <li class="opcoes">
                                <a href="<?php print base_url(); ?>social">A&ccedil;&otilde;es Sociais</a>
                            </li>
                            <li class="segundo_submenu">
                                <a href="<?php print base_url(); ?>blog">Blog</a>
                            </li>
                            <li class="segundo_submenu">
                                <a href="<?php print base_url(); ?>contato">Contato</a>
                            </li>
                            <li class="segundo_submenu">
                                <a href="<?php print base_url(); ?>educacional">Espa&ccedil;o Educacional</a>
                            </li>
                            <li class="segundo_submenu">
                                <a href="<?php print base_url(); ?>eventos">Eventos Sociais</a>
                            </li>
                            <li class="segundo_submenu">
                                <a href="<?php print base_url(); ?>galeria_fotos">Galeria de Fotos</a>
                            </li>
                            <li class="segundo_submenu">
                                <a href="<?php print base_url(); ?>institucional">Institucional</a>
                            </li>
                        </ul>
                    </div>

CSS:

.dropdown-menu>li>a {

  color: $branco;

  font-size: 15px;

  padding: 0.7em;

  padding-left: 1em;

}

.dropdown-menu>li>a:hover {

  color: $laranjado;

  font-size: 15px;

  padding: 0.7em;

  padding-left: 1em;

}

.open>.dropdown-menu {

  width: 20em;

}

.estilo_dropdown {

  @extend .gradiente;

  li {

    color: $laranjado;

  }

}

.estilo_dropdown:hover {

  background-color: $branco!important;

  li {

    color: $laranjado;

  }

}

Answer 1

Some points may be making your layout not work as expected. Probably only this won’t solve your problem completely, but it helps you solve.

position the element dropdown-menu concerning the element dropdown

.dropdown{
    position:relative;
}
.dropdown-menu{
    position:absolute;
    top:0px; /* distancia dos botoes */
    right:0;
    width: 90vw; /* vw = viewport width - 90% do tamanho da tela*/
}

Heed: vw = viewport width and works on IE9 or higher.