How do I position menu next to each other - CSS

Asked

Viewed 50 times

-2

I am trying to create a dropdown menu, which opens the sub-menu down the button, is working properly until this part. But I would like the menu buttons (DIV’s) to be next to each other. But it’s getting one below the other on the side.

UPDATED

I found my mistake, I was limiting the width of the column to 150px on .dropdown so I played down the other button, put 100% and stood side by side the buttons.

But every time I pass the mouse first button it throws the second button down from its submenu. And when I hover the mouse on the second button, its submenu opens below the first button.

I’m analyzing my code but I haven’t noticed anything yet. If anyone notices anything causing this.

Follows the code:

CSS:

body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.menu-superior {
    background-color: #242424 ;
    width: 100%;
    padding: 0 ;
}

.dropdown { /* Tamanho do wrapper do dropdown */
    width: 100%;
}

.dropdown a { /* Retira sublinhado das âncoras */
    text-decoration: none;
}

.dropdown-button { /* Estiliza o botão dropdown */
    display: inline-block;
    color: white;
    font-weight: bolder;
    text-align: center;
    vertical-align: middle;
    background: Green;
    padding: 10px 20px;
    border-radius: 5px;
}

.dropdown-menu { /* Estiliza o menu dropdown */
    width: 150px;
    border: 1px solid grey;
    border-radius: 5px;
    display: none;
}

.menu-item { /* Estiliza cada item do dropdown */
    display: block;
    width: 100%;
    text-align:center;
    color: White;
}

/* Mágica do dropdown */

/**
  * Seleciona o próximo elemento irmão do .dropdown-button, quando damos foco no dropdown.
  * Portanto, o irmão (menu de itens) é visualizado. */
.dropdown-button:hover + .dropdown-menu { 
    display: block;
}

.dropdown-menu:hover { /* Mantém o menu aberto, quando etiver com mouse sobre algum item*/
    display: block;
}

HTML:

<div class="menu-superior">
      <div class="dropdown">
         <a href="#0" class="dropdown-button">Minhas Contas</a>
         <div class="dropdown-menu">
                 <a href="#1" class="menu-item">Geral</a>
                 <a href="#2" class="menu-item">Vencidas</a>
                 <a href="#3" class="menu-item">Comprovantes</a>
         </div>
         <a href="#0" class="dropdown-button">Configurações</a>
         <div class="dropdown-menu">
                 <a href="#4" class="menu-item">Meus Dados</a>
                 <a href="#5" class="menu-item">Personalizar</a>
                 <a href="#6" class="menu-item">Sair</a>
         </div>
      </div>  
</div>
html css

1 answer

0


The error is in your css, you have the elements with fixed positions and next to each other. I’ve worked out a quick dropdown template for you to see how the dropdown works (see example below). Take a look at https://www.w3schools.com/howto/howto_css_dropdown.asp It will help you figure out how to dropdown without the buttons moving.

.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}
<body>

<div class="dropdown">
  <button class="dropbtn">Minhas Contas</button>
  <div class="dropdown-content">
    <a href="#">geral</a>
    <a href="#">vencidos</a>
    <a href="#">comprovantes</a>
  </div>
</div>
<div class="dropdown">
  <button class="dropbtn">Configurações</button>
  <div class="dropdown-content">
    <a href="#">meus dados</a>
    <a href="#">personalizar</a>
    <a href="#">sair</a>
  </div>
</div>
</body>
</html>

  • 1

    Thank you, little brother, you helped me a lot. I had researched about and assembled this code, but I will take a look at this W3 article to better understand how it works. Hug.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.