How do I make the dropdown box appear underneath a tag?

August 8, 2022

When hovering the ‘Drop’ in the nav bar, I want the div to show underneath. However it doesn’t show at all. When I do display it, it’s at the top left corner. How can I make it so it will show underneath the Drop element, without hardcoding the values obviously.

This is some other text underneath the other text.

/** @format */

* {
    box-sizing: border-box;
    overflow: hidden;
    outline: none;
    margin: 0;
    border: 0;
    padding: 0;
}
html {
    background-color: rgb(193, 235, 107);
}
nav {
    background-color: #333;
}
nav a {
    float: left;
    color: white;
    font-size: 15px;
    text-decoration: none;
    display: block;
    padding-left: 10px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    text-decoration: none;
}

.drop:hover {
    background-color: rgb(193, 235, 107);
}
nav a:hover {
    background-color: rgb(0, 0, 0);
}

.drop-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}
.drop-content a {
    float: left;
    color: white;
    font-size: 15px;
    text-decoration: none;
    display: block;
    padding-left: 10px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    text-decoration: none;
}
.drop-content a:hover {
    background-color: #ddd;
}

.drop:hover .drop-content {
    display: block;
}

<!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" />
        <link rel="stylesheet" href="css.css" />
        <title>TESTING</title>
    </head>
    <body>
        <nav>
            <a href="">Home</a>
            <a href="">News</a>
            <a href="">Contact</a>
            <a href="">About</a>
            <a href="">Something</a>
            <a class="drop" href="">Drop</a>
            <div class="drop-content">
                <a href="">Dropped</a>
                <a href="">Dropped</a>
            </div>
            <a href="">Last</a>
        </nav>
        <main></main>
        <script src="js.js"></script>
    </body>
</html>

>Solution :

The best approach would be to wrap your links in an unordered list. Then wrap the dropdown within the same li as the main anchor to make the position relative to the element itself like the following:

Note: You set `overflow` to `hidden` on all elements, you should remove that

/** @format */

* {
    box-sizing: border-box;
    outline: none;
    margin: 0;
    border: 0;
    padding: 0;
}
html {
    background-color: rgb(193, 235, 107);
}
nav {
    background-color: #333;
}

nav ul {
  display: flex;
  list-style: none;
}

nav li {
  position: relative;
}

nav a {
    float: left;
    color: white;
    font-size: 15px;
    text-decoration: none;
    display: block;
    padding-left: 10px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    text-decoration: none;
}

.drop:hover {
    background-color: rgb(193, 235, 107);
}
nav a:hover {
    background-color: rgb(0, 0, 0);
}

.drop-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.drop-content a {
    color: white;
    font-size: 15px;
    text-decoration: none;
    display: block;
    padding-left: 10px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    text-decoration: none;
}
.drop-content a:hover {
    background-color: #ddd;
}

li:hover .drop-content {
    display: block;
    position: absolute;
    top: 37px;
    left: 0;
}

<!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" />
        <link rel="stylesheet" href="css.css" />
        <title>TESTING</title>
    </head>
    <body>
        <nav>
          <ul>
            <li><a href="">Home</a></li>
            <li><a href="">News</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Something</a></li>
            <li>
              <a class="drop" href="">Drop</a>
              <div class="drop-content">
                  <a href="">Dropped</a>
                  <a href="">Dropped</a>
              </div>
            </li>
            <li><a href="">Last</a></li>
          </ul>
        </nav>
        <main></main>
        <script src="js.js"></script>
    </body>
</html>