0

Eu fiz um menu simples com drop box, mas quando eu passo o mouse sobre ele, os outros elementos da minha li quebra. Gostaria de saber por quê.

body  {
  font-family: 'Raleway', sans-serif;
}


/* Menu  */

.menu {
  box-sizing: border-box;
  width:100%;
  height: 100px;
  background-color: #000;
  color: #4d8c8a;
  display: inline-block;
  font-size: 20px;
  text-align: center;
}

.menu li{
  display: inline-block;
  padding-right: 10px;  
}

/* Sub Menu */



.menu .sub-menu{
  box-sizing: border-box;
  display:none;
  flex-direction: column;
  width: 100%;
  height:100%;
  background-color: #000;
  border: solid 2px #4d8c8a;
  position: relative;
}

.menu #sub-menu li{
  padding: 5px;
}

.menu ul li:hover > .sub-menu{
  display: flex;
}

#submenu2{
  position: absolute;
  top: 75px;
  left: 95px;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Front-End.Erian</title>
        <!-- Metas -->
        <meta charset="utf-8">
        <!-- Fonte -->
        <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
        <!-- Css -->
        <link rel="stylesheet" type="text/css" href="css/normalize.css">
        <link rel="stylesheet" type="text/css" href="css/estilo.css">
        <!-- JavaScript -->
        <link rel="script" href="js/script.js"/>
        </head>
    <body>
        <nav class="menu">
            <ul>
                <li>Home</li>
                <li><a href="#">Empresa</a>
                    <ul class="sub-menu">
                        <li>Sub1</li>
                        <li>Sub1</li>
                        <li>Sub1</li>
                        <li>Sub1
                            <ul class="sub-menu" id="submenu2">
                                <li>Sub2</li>
                                <li>Sub2</li>
                                <li>Sub2</li>
                                <li>Sub2</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>Sobre Nós</li>
                <li>Contato</li>
            </ul>
        </nav>
    </body>
</html>

0

1 Resposta 1

0

É porque o submenu deveria ter position: absolute;, ou seja, ser posicionado de forma absoluta para não influenciar os outros elementos irmãos. Mas é preciso colocar também position: relative; nas li's para que o position: absolute; do submenu seja posicionado dentro da sua li.

E não precisa usar width e height nos submenus, pois eles terão largura e altura automática conforme o conteúdo. Mas você poderia usar um padding para dar um espaçamento interno, se quiser.

Veja que alterei também o top e o left do #submenu2 para que ele fique na posição correta (você pode ajustar esses valores com px se quiser uma posição que mais lhe agrade). Veja:

body  {
  font-family: 'Raleway', sans-serif;
}


/* Menu  */

.menu {
  box-sizing: border-box;
  width:100%;
  height: 100px;
  background-color: #000;
  color: #4d8c8a;
  display: inline-block;
  font-size: 20px;
  text-align: center;
}

.menu li{
  display: inline-block;
  padding-right: 10px;
  position: relative;
}

/* Sub Menu */



.menu .sub-menu{
  box-sizing: border-box;
  display:none;
  flex-direction: column;
  /* width: 100%; */
  /* height:100%; */
  background-color: #000;
  border: solid 2px #4d8c8a;
  position: absolute;
}

.menu #sub-menu li{
  padding: 5px;
}

.menu ul li:hover > .sub-menu{
  display: flex;
}

#submenu2{
  position: absolute;
  top: 0;
  left: 100%;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Front-End.Erian</title>
        <!-- Metas -->
        <meta charset="utf-8">
        <!-- Fonte -->
        <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
        <!-- Css -->
        <link rel="stylesheet" type="text/css" href="css/normalize.css">
        <link rel="stylesheet" type="text/css" href="css/estilo.css">
        <!-- JavaScript -->
        <link rel="script" href="js/script.js"/>
        </head>
    <body>
        <nav class="menu">
            <ul>
                <li>Home</li>
                <li><a href="#">Empresa</a>
                    <ul class="sub-menu">
                        <li>Sub1</li>
                        <li>Sub1</li>
                        <li>Sub1</li>
                        <li>Sub1
                            <ul class="sub-menu" id="submenu2">
                                <li>Sub2</li>
                                <li>Sub2</li>
                                <li>Sub2</li>
                                <li>Sub2</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>Sobre Nós</li>
                <li>Contato</li>
            </ul>
        </nav>
    </body>
</html>

1
  • Muito obrigado! +1
    – Erian Erik
    Commented 3/12/2019 às 0:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .