How to make dropdown menu appears below-CodePudding

So, I was trying to make a dropdown menu, it works. But when I hover above it, it just appears in front of my Parents menu

I've tried some things like making an inline-block inside the parent's menu and still didn't work, I tried one thing that work that is adding a top: 100% code but it just didn't feel right cuz basically you add space to it and it just didn't feel right

Code:

* {
  margin: 0;
  padding: 0;
}

body {
  background-image: url(photo-1542831371-29b0f74f9713.jpg);
  background-size: cover;
}

nav {
  /* this is a tag */
  width: 100%;
  height: 60px;
  background-color: white;
}

nav a {
  font-family: arial, sans-serif;
  color: #222;
  font-size: 18px;
  line-height: 55px;
  float: left;
  padding: 0px 14px;
  text-decoration: none;
  text-align: center;
}

nav form {
  float: left;
  max-width: 100%;
  height: 60px;
}

nav ul {
  float: left;
  text-align: center
}

nav li:hover>a {
  background: rgb(224, 224, 224);
  cursor: pointer;
}

nav ul li {
  float: left;
  list-style: none;
  position: relative;
}

nav ul li a {
  display: block;
  font-family: arial, sans-serif;
  color: #222;
  font-size: 18px;
  padding: 0px 14px;
  text-decoration: none;
}

nav ul li ul {
  display: none;
  position: absolute;
  background-color: rgba(255, 238, 238, 0.89);
  backdrop-filter: blur(5px);
  border-radius: 0px 0px 4px 4px;
}

nav ul li:hover ul {
  display: block;
}

nav ul li ul li {
  width: 180px;
  border-radius: 4px;
}

nav ul li ul li a {
  padding: 8px 14px;
}

nav ul li ul li a:hover {
  background-color: #69696969
}

<nav id="navbar">
  <form Name="" Method="" action="BUTTON TEST.html">
    <input type="Image" name="IB1" src="gradient-coding-logo-template_23-2148809439.jpg" width="70" height="60">
  </form>
  <ul>
    <li><a href="about.php">About</a>
      <ul>
        <li><a href="about.php#expectations">Expectations</li></a>
          <li><a href="about.php#faq">FAQ</li></a>
            <li><a href="laptopprogram.php">Laptop Program</li></a>
      </ul>
      </li>
      <li><a href="why.php">Why?</a>
        <ul>
          <li><a href="why.php#special">What?</li></a>
            <li><a href="why.php#events">Events & Activities</li></a>
              <li><a href="why.php#grads">Meet The Grads</li></a>
        </ul>
        </li>
        <li><a href="events.php">Events</a>
          <ul>
            <li><a href="events.php#opportunities">Opportunities</li></a>
              <li><a href="#">asd</li></a>
          </ul>
          </li>
          <a href="" target="_blank">
            <li>assd</li>
          </a>
          <a href="contact.php">
            <li>Contact</li>
          </a>
  </ul>
</nav>

CodePudding user response：

Just add top: 100% for the submenus:

nav ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  background-color: rgba(255, 238, 238, 0.89);
  backdrop-filter: blur(5px);
  border-radius: 0px 0px 4px 4px;
}

This will position it 100% from the top of the relative positioned parent - 100% referring to the height of that parent, so that it will start directly below it.

CodePudding user response：

I have prepared a possible solution to your problem. With some modifications in the HTML, I added some separate classes to make the code more transparent.

* {
    margin: 0;
    padding: 0;
}
  
body {
    background-image: url(photo-1542831371-29b0f74f9713.jpg);
    background-size: cover;
}

.sub-menu {
    position: absolute;
    top: 55px;
    flex-direction: column;
    display: none;
    background-color: rgba(255, 238, 238, 0.89);
    backdrop-filter: blur(5px);
    border-radius: 0px 0px 4px 4px;
}

.about:hover .sub-menu {
    left: 70px;
}

.why:hover .sub-menu {
    left: 145px;
}
  
nav {
    /* this is a tag */
    width: 100%;
    height: 60px;
    background-color: white;
    display: flex;
}
  
nav a {
    font-family: arial, sans-serif;
    color: #222;
    font-size: 18px;
    line-height: 55px;
    float: left;
    padding: 0px 14px;
    text-decoration: none;
    text-align: center;
}
  
nav form {
    float: left;
    max-width: 100%;
    height: 60px;
}
  
nav ul {
    float: left;
    text-align: center
}
  
nav li:hover>a {
    background: rgb(224, 224, 224);
    cursor: pointer;
}
  
nav ul li {
    float: left;
    list-style: none;
}
  
  nav ul li a {
    display: block;
    font-family: arial, sans-serif;
    color: #222;
    font-size: 18px;
    padding: 0px 14px;
    text-decoration: none;
  }
  
  nav ul li:hover ul {
    display: flex;
  }
  
  nav ul li ul li {
    width: 180px;
    border-radius: 4px;
  }
  
  nav ul li ul li a {
    padding: 8px 14px;
  }
  
  nav ul li ul li a:hover {
    background-color: #69696969
  }

<!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="style.css">
    <title>Document</title>
</head>
<body>
    <nav id="navbar">
        <form Name="" Method="" action="BUTTON TEST.html">
          <input type="Image" name="IB1" src="gradient-coding-logo-template_23-2148809439.jpg" width="70" height="60">
        </form>
        <ul >
            <li ><a href="about.php">About</a>
                <ul >
                    <li><a href="about.php#expectations">Expectations</li></a>
                    <li><a href="about.php#faq">FAQ</li></a>
                    <li><a href="laptopprogram.php">Laptop Program</li></a>
                </ul>
            </li>
            <li ><a href="why.php">Why?</a>
                <ul >
                    <li><a href="why.php#special">What?</li></a>
                    <li><a href="why.php#events">Events & Activities</li></a>
                    <li><a href="why.php#grads">Meet The Grads</li></a>
                </ul>
            </li>
            <li><a href="events.php">Events</a>
                <ul >
                    <li><a href="events.php#opportunities">Opportunities</li></a>
                    <li><a href="#">asd</li></a>
                </ul>
            </li>
            <a href="" target="_blank">
                <li>assd</li>
            </a>
            <a href="contact.php">
                <li>Contact</li>
            </a>
        </ul>
    </nav>
      
</body>
</html>

CodePudding user response：

There are some points:

In HTML nested tag you should close the inner tag before the outer tag

<li> <a> link tag </a> </li>
Position property can't be used with float. if an element was floated, can't take position and left , top , bottom , right properties.
The better way for layout, is to use display: flex, a powerful feature with less code. (you can read this and this)

* {
  margin: 0;
  padding: 0;
}

body {
  background-image: url(photo-1542831371-29b0f74f9713.jpg);
  background-size: cover;
}

nav {
  /* this is a tag */
  height: 60px;
  background-color: white;
  display:flex;
}

nav a {
  font-family: arial, sans-serif;
  color: #222;
  font-size: 18px;
  line-height: 55px;
  padding: 0px 14px;
  text-decoration: none;
  text-align: center;
  display: block;

}

nav form {
  max-width: 100%;
  height: 60px;
}

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

nav li:hover>a {
  background: rgb(224, 224, 224);
  cursor: pointer;
}

nav ul li ul {
  display: none;
  position: absolute;
  background-color: rgba(255, 238, 238, 0.89);
  backdrop-filter: blur(5px);
  border-radius: 0px 0px 4px 4px;
}

nav ul li:hover ul {
  display: block;
}

nav ul li ul li {
  width: 180px;
  border-radius: 4px;
}

nav ul li ul li a {
  padding: 8px 14px;
}

nav ul li ul li a:hover {
  background-color: #69696969
}

<nav id="navbar">
      <form name="" method="" action="BUTTON TEST.html">
        <input
          type="Image"
          name="IB1"
          src="gradient-coding-logo-template_23-2148809439.jpg"
          width="70"
          height="60"
        />
      </form>
      <ul>
        <li>
          <a href="about.php">About</a>
          <ul>
            <li><a href="about.php#expectations">Expectations</a></li>
            <li><a href="about.php#faq">FAQ</a></li>
            <li><a href="laptopprogram.php">Laptop Program</a></li>
          </ul>
        </li>
        <li>
          <a href="why.php">Why?</a>
          <ul>
            <li><a href="why.php#special">What?</a></li>
            <li><a href="why.php#events">Events & Activities</a></li>
            <li><a href="why.php#grads">Meet The Grads</a></li>
          </ul>
        </li>
        <li>
          <a href="events.php">Events</a>
          <ul>
            <li><a href="events.php#opportunities">Opportunities</a></li>
            <li><a href="#">asd</a></li>
          </ul>
        </li>

        <li><a href="" target="_blank">assd</a></li>

        <li><a href="contact.php">Contact</a></li>
      </ul>
    </nav>

CodePudding user response：

I also like to know the answer but I did it with bootstrap so It didn't hassle me too much