Menu with doubt dropdown

Navigation
0

Well, I made a menu with dropdown that gives a little problem. As soon as he opens, he stretches the line rather than being in a box. Can anyone help me - > link link where the menu is located. 

<html>
<head>
<style>
width: 100%; 
height: 100%; 
position: absolute;
.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #000;
  margin: 6px 95px;
  transition: 0.4s;
}

.texto{
    margin: 0px 0px -45px 0px;
    font-size: 27px;
    font-family: "Raleway", Times, serif;
}


/* Rotate first bar */

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}


/* Fade out the second bar */

.change .bar2 {
  opacity: 0;
}


/* Rotate last bar */

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.hide {
  display: none;
}
a:link 
{ 
 text-decoration:none; 
} 
</style>
<body>
  <h1>
    <div class="texto">MENU</div>
    <div class="container" onclick="myFunction(this)">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>

      <div id="myDropdown" class="dropdown-content hide">
        <a href="#"><font size="5" color="#97a2a7">TREINAMENTO</font></a>
        <br/>
        <a href="#"><font size="5" color="#97a2a7">PÚBLICO ALVO</font></a>
        <br/>
        <a href="#"><font size="5" color="#97a2a7">OPORTUNIDADE</font></a>
        <br/>
        <a href="#"><font size="5" color="#97a2a7">ESTRUTURA</font></a>
        <br/>
        <a href="#"><font size="5" color="#97a2a7">PALESTRANTES</font></a>
        <br/>
        <a href="#"><font size="5" color="#97a2a7">DEPOIMENTOS</font></a>
        <br/>
        <a href="#"><font size="5" color="#97a2a7">GALERIA DE FOTOS</font></a>
        <br/>
        <a href="#"><font size="5" color="#97a2a7">LOCAL</font></a>
        <br/>
        <a href="#"><font size="5" color="#97a2a7">IDEALIZADORES</font></a>
        <br/>
      </div>
    </div>
  </h1>

  <script>
    function myFunction(x) {
      x.classList.toggle("change");
      document.getElementById('myDropdown').classList.toggle("hide");
    }
  </script>
</body>
</head>
</html>

Menu Code: l ink donwload

    
asked by anonymous 02.02.2018 / 20:22

1 answer

1

When analyzing your code, I saw that you need to adjust the CSS for the menu. Because the site is responsive, the menu needs to be position: absolute; when in desktop mode and position: relative; in mobile mode. I'll list what should be done:

This is the div of the menu: 

/* MODO GERAL */
#le_body_row_1_col_3{
    z-index: 99;
    background: #fff;
}

These here you include in your @media rule in the respective modes: 

/* MODO DESKTOP */
#le_body_row_1_col_3{
    position: absolute;
}

/* MODO MOBILE */
#le_body_row_1_col_3{
    position: relative;
}

This is the div of the menu content (include CSS in general) that will receive a spacing: 

#myDropdown{
    padding: 10px; /* você pode alterar o valor que achar melhor*/
}

By making these additions, your menu will work independently and will not stretch the line . Here's how it will look:

    
02.02.2018 / 22:20
Add SUM () in the querry results Import data into mysql from a layout