I cannot set the dropdown contents position properly. It displays further up than I want it to be

user_16236157 0
Viewed 24

The height of the "nav" is shorter than I wanted to be and I can't set it with height 100% to be the same as the parents. I want it to start below the navbar box. Essentially I want nav to have the same height as all of the navbar container if it's possible for the dropdown menu to start directly below that.

@import url('https://fonts.googleapis.com/css2?family=Play:wght@700&display=swap%27%27');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  max-height: 100vh;
  background-color: black;
}

#nav-container > nav > ul {
  list-style-type: none;
}

#nav-background {
  top: 0;
  height: 50px;
  width: 100%;
  background-color: #131325;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}

#nav-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  max-width: 1000px;
  margin: 0 auto;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-family: "Play", sans-serif;
  align-items: center;
}


#nav-logo {
  color: gainsboro;
  text-decoration: none;
  display: flex;
}

#nav-logo:hover .red{
  color: red;
}


.nav-ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  max-width: 700px;
}

.nav-ul > li {
  width: 100%;
  text-align: center;
}

.nav-link {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: gainsboro;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.2rem;
  -webkit-transition: 200ms;
  transition: 200ms;

  
}

.nav-link:hover{
  background-color: red;
  
}

.active-link {
}

.dropdown{
  width: 100%;
  list-style: none;
  }

.dropdown-content{
  display: none;
  position: absolute;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  list-style: none;
  
}

.dropdown:hover .dropdown-content {
  display: block;
  color: white; 
  background-color: rgb(0,136,169,1); 
  transition: all .5s ease;
  list-style: none;

}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  list-style: none;
  align-items: flex-end;
}

/* MOBILE MENU */
@media screen and (max-width: 700px) {

  #nav-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
  }

  #nav-menu-button {
    padding: 1rem;
    background-color: #f1f1f1;
    cursor: pointer;
  }

  .nav-ul {
    display: block;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: auto;
    direction: rtl;
    transition: max-height 400ms;
    max-height: 80vh;
  }

  .hide-ul {
    max-height: 0;
  }

  .nav-link {
    padding: 1rem 0;
    font-size: 1.3rem;
    border-bottom: 1px solid #f4f4f4;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>FlexNav</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="./css/flexnav.css">
  </head>

  <body>
    <div id="nav-background">
      <div id="nav-container">
        <nav>
          <ul class="nav-ul hide-ul">
            <li class="dropdown"><a class="nav-link active-link" href="#">Menu</a>
              <ul class="dropdown-content">
                <li><a class="a" href="#">A</a></li>
                <li><a class="a" href="#">B</a></li>
                <li><a class="a" href="#">C</a></li>
            </ul>
            </li>
            </ul>
        </nav>
      </div>
    </div>
  </body>

</html>
flexbox css html
2 Answers

You need to add the exact height (i.e. 50px, not 100%) and center it vertically with something like line-height to either your <nav> or .nav-ul, both will give you the same result.

height: 50px;
line-height: 50px;

Here's the full code after adding them to .nav-ul:

@import url('https://fonts.googleapis.com/css2?family=Play:wght@700&display=swap%27%27');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  max-height: 100vh;
  background-color: black;
}

#nav-container > nav > ul {
  list-style-type: none;
}

#nav-background {
  top: 0;
  height: 50px;
  width: 100%;
  background-color: #131325;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}

#nav-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  max-width: 1000px;
  margin: 0 auto;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-family: "Play", sans-serif;
  align-items: center;
}


#nav-logo {
  color: gainsboro;
  text-decoration: none;
  display: flex;
}

#nav-logo:hover .red{
  color: red;
}


.nav-ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  max-width: 700px;
  /* NEW CODE BELOW */
  height: 50px;
  line-height: 50px;
  /* NEW CODE ABOVE */
}

.nav-ul > li {
  width: 100%;
  text-align: center;
}

.nav-link {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: gainsboro;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.2rem;
  -webkit-transition: 200ms;
  transition: 200ms;

  
}

.nav-link:hover{
  background-color: red;
  
}

.active-link {
}

.dropdown{
  width: 100%;
  list-style: none;
  }

.dropdown-content{
  display: none;
  position: absolute;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  list-style: none;
  
}

.dropdown:hover .dropdown-content {
  display: block;
  color: white; 
  background-color: rgb(0,136,169,1); 
  transition: all .5s ease;
  list-style: none;

}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  list-style: none;
  align-items: flex-end;
}

/* MOBILE MENU */
@media screen and (max-width: 700px) {

  #nav-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
  }

  #nav-menu-button {
    padding: 1rem;
    background-color: #f1f1f1;
    cursor: pointer;
  }

  .nav-ul {
    display: block;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: auto;
    direction: rtl;
    transition: max-height 400ms;
    max-height: 80vh;
  }

  .hide-ul {
    max-height: 0;
  }

  .nav-link {
    padding: 1rem 0;
    font-size: 1.3rem;
    border-bottom: 1px solid #f4f4f4;
  }
}
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>FlexNav</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <div id="nav-background">
      <div id="nav-container">
        <nav>
          <ul class="nav-ul hide-ul">
            <li class="dropdown"><a class="nav-link active-link" href="#">Menu</a>
              <ul class="dropdown-content">
                <li><a class="a" href="#">A</a></li>
                <li><a class="a" href="#">B</a></li>
                <li><a class="a" href="#">C</a></li>
            </ul>
            </li>
            </ul>
        </nav>
      </div>
    </div>
  </body>

</html>

user_55603990

Here you go...

Add line-height: 35px; to .nav-link {...}.

@import url('https://fonts.googleapis.com/css2?family=Play:wght@700&display=swap%27%27');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  max-height: 100vh;
  background-color: black;
}

#nav-container>nav>ul {
  list-style-type: none;
}

#nav-background {
  top: 0;
  height: 50px;
  width: 100%;
  background-color: #131325;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

#nav-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  max-width: 1000px;
  margin: 0 auto;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-family: "Play", sans-serif;
  align-items: center;
}

#nav-logo {
  color: gainsboro;
  text-decoration: none;
  display: flex;
}

#nav-logo:hover .red {
  color: red;
}

.nav-ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  max-width: 700px;
}

.nav-ul>li {
  width: 100%;
  text-align: center;
}

.nav-link {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: gainsboro;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.2rem;
  -webkit-transition: 200ms;
  transition: 200ms;
  line-height: 35px;
}

.nav-link:hover {
  background-color: red;
}

.active-link {}

.dropdown {
  width: 100%;
  list-style: none;
}

.dropdown-content {
  display: none;
  position: absolute;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  list-style: none;
}

.dropdown:hover .dropdown-content {
  display: block;
  color: white;
  background-color: rgb(0, 136, 169, 1);
  transition: all .5s ease;
  list-style: none;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  list-style: none;
  align-items: flex-end;
}


/* MOBILE MENU */

@media screen and (max-width: 700px) {
  #nav-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
  }
  #nav-menu-button {
    padding: 1rem;
    background-color: #f1f1f1;
    cursor: pointer;
  }
  .nav-ul {
    display: block;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: auto;
    direction: rtl;
    transition: max-height 400ms;
    max-height: 80vh;
  }
  .hide-ul {
    max-height: 0;
  }
  .nav-link {
    padding: 1rem 0;
    font-size: 1.3rem;
    border-bottom: 1px solid #f4f4f4;
  }
}
<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl' crossorigin='anonymous'>
</head>

<body>

  <div id="nav-background">
    <div id="nav-container">
      <nav>
        <ul class="nav-ul hide-ul">
          <li class="dropdown"><a class="nav-link active-link" href="#">Menu</a>
            <ul class="dropdown-content">
              <li><a class="a" href="#">A</a></li>
              <li><a class="a" href="#">B</a></li>
              <li><a class="a" href="#">C</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </div>

</body>

</html>

user_103471450
Related