'All list elements move when I use dropdown menu

When I try to open the dropdown menu, all other list elements move down.

var menuList = document.getElementById("menuList");

function togglemenu() {

  if (menuList.style.maxHeight == "0px") {
    menuList.style.maxHeight = "10000px";
  } else {
    menuList.style.maxHeight = "0px";
  }

}

var dropdown = document.getElementById("drp");

function toggledrop() {
  if (dropdown.style.display == "none") {
    var x = document.getElementById("ss");
    x.style.display = "none";
    dropdown.style.display = "block";

  } else {
    dropdown.style.display = "none";
  }
}

var drpdown = document.getElementById("ss");

function toggledrp() {
  if (drpdown.style.display == "none") {
    var x = document.getElementById("drp");
    x.style.display = "none";
    drpdown.style.display = "block";
  } else {
    drpdown.style.display = "none";
  }
}

body {
  background-image: url("images/anders-jilden-medium-5d01610e.jpg");
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  margin: 0;
}


/*.background-image-etc{
    position: relative;
    overflow: hidden;
    padding-bottom: 100%;
    padding-top: 0%;
    width: 100%;
}

.background-image-etc img{
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    left: 50%
}*/

.navigationbar {
  position: fixed;
  top: 0px;
  width: 100%;
  text-align: right;
}

.dropdown {
  z-index: 1;
  position: relative;
  display: inline-block;
  padding-left: 8%;
  padding-right: 8%;
}

.dropbtn {
  flex: 1;
  text-align: right;
  background-color: transparent;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  outline: none;
  left: 100px;
  margin-right: 30px;
  z-index: 1;
  display: inline-block;
}


.dropbtn a {
  color: white;
  outline: none;
  border: none;
  text-decoration: none;
}

.dropdown-content {
  width: 100%;
  max-width: 77px;
  display: none;
  position: relative;
  background-color: #f1f1f1;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 2;
  height: fit-content;
  height: -moz-fit-content;
}

ul {
  flex: 1;
  text-align: right;
  display: inline-block;
  font-family: Arial;
}

ul li {
  display: inline-block;
  list-style: none;
  margin-right: 70px;
  padding: 16px;
}

ul li a {
  font-size: 16px;
  color: white;
  outline: none;
  border: none;
  text-decoration: none;
  font-weight: normal;
}

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

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

ul li a:hover {
  color: rgb(74, 183, 216);
}

.container {
  min-height: 100vh;
}

#ss:after a {
  position: absolute;
}

.navigationbar #bar {
  max-height: 82px;
  height: 100%;
  width: 100%;
  z-index: -1;
  background-color: rgb(48, 44, 44);
  position: absolute;
  top: 0;
  right: 0;
}

.menu {
  width: 50px;
  height: 50px;
  cursor: pointer;
  flex: 1;
  position: absolute;
  top: 10px;
  right: 30px;

}

.dropdown img {
  color: white;
}

#menuList {
  overflow: hidden;
  transition: 0.5s;
}

.img-responsive {
  width: 30px;
  height: 30px;
  cursor: pointer;
  flex: 1;
  top: 30px;

}

@media only screen and (max-width:700px) {
  .navigationbar {
    text-align: left;
  }

  .navigationbar #bar {
    max-height: none;

  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Personal site</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="container">
      <div class="navigationbar" id="menuList">
        <nav>
          <div id="bar"></div>
          <div class="dropdown">
            <ul>
              <li><a href="despre.html">Despre mine</a></li>
              <li><a href="cv.html">CV</a></li>
              <li id="s" class="dropbtn">
                <a href="hobby.html">Hobby-uri</a>
                <img src="images/directional-chevron-down-512.webp" alt="⬇️" class="img-responsive" onclick="toggledrop()">
                <div class="dropdown-content" id="drp">
                  <a href="baschet.html">Baschet</a>
                  <a href="bicicleta.html">Bicicleta</a>
                  <a href="urbex.html">Urbex</a>
                </div>
              </li>
              <li class="dropbtn">
                <a href="urbex.html">Urbex</a>
                <img src="images/directional-chevron-down-512.webp" alt="⬇️" id="da" class="img-responsive" onclick="toggledrp()">

                <div class="dropdown-content" id="ss">
                  <a href="fortchitila.html">Fortul Chitila</a>
                  <a href="fasteco.html">FastEco</a>
                  <a href="blocuri.html">Blocuri Pipera</a>
                </div>
              </li>
            </ul>
          </div>
        </nav>
      </div>
      <img src="images/108564673-hamburger-menu-web-icon-white-icon-with-shadow-on-transparent-background.webp" alt="Menu" class="menu" onclick="togglemenu()">
    </div>
    <!--<div class="background-image-etc">
      <img src = "images/anders-jilden-medium-5d01610e.jpg" alt />
    </div>-->
    <script src="index.js"></script>
  </body>

</html>

https://jsfiddle.net/8thzygbr/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'All list elements move when I use dropdown menu

Sources

Related Questions