Pure CSS drop box

Asked

Viewed 34 times

0

I made a simple menu with drop box, but when I hover over it, the other elements of my li breaks. I would like to know why.

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>

html css

1 answer

0


It’s because the submenu should have position: absolute;, that is, to be positioned in an absolute way so as not to influence the other fraternal elements. But it is also necessary to put position: relative; in li's for that the position: absolute; the submenu is positioned inside its li.

And you don’t have to use width and height submenus, because they will have automatic width and height according to the content. But you could use a padding to give an internal spacing if you want.

See that I also changed the top and the left of #submenu2 so that it is in the correct position (you can adjust these values with px if you want a position that you like). See:

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>

  • Thank you! + 1

Browser other questions tagged html css

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