How to make dropdown menu appears below

Question

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>

Lots of template errors in your html. Please close tags properly. Something like `
...
` — naveen, Dec 09 '21 at 14:55
Does this answer your question? [Drop-down menu that opens up/upward with pure css](https://stackoverflow.com/questions/7814186/drop-down-menu-that-opens-up-upward-with-pure-css) — iLuvLogix, Dec 09 '21 at 14:59

CBroe · Accepted Answer · 2021-12-09T14:58:57.250

2

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.

edited Dec 09 '21 at 14:58

answered Dec 09 '21 at 14:57

CBroe

91,630
14
92
150

1

dupe of https://stackoverflow.com/questions/7814186/drop-down-menu-that-opens-up-upward-with-pure-css – iLuvLogix Dec 09 '21 at 14:58
yea so this answer as i said doesn't feel right cause' you just add space above the submenus and its really not natural – GrandLine Rookie Dec 09 '21 at 23:54
@GrandLineRookie what kind of argument is "doesn't feel right"? This achieves _exactly_ what you want - that the sub-menus start at the bottom of your parent item. – CBroe Dec 10 '21 at 07:30
Yeah so (edit) this didn't work I tried and nope it didn't work it instead it just didn't show the submenus – GrandLine Rookie Dec 10 '21 at 14:06
@GrandLineRookie I really don't know what you are talking about. This: https://jsfiddle.net/k2wftsdu/ is your code from the question, and the _only_ thing I added is the `top: 100%;` part ... – CBroe Dec 10 '21 at 14:10
huh that's weird oooooh its because I did some things to my code yeah your code does really work so thanks. – GrandLine Rookie Dec 10 '21 at 14:52

score 2 · Answer 2 · answered Dec 09 '21 at 15:23

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 class="main-menu">
            <li class="about"><a href="about.php">About</a>
                <ul class="sub-menu">
                    <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 class="why"><a href="why.php">Why?</a>
                <ul class="sub-menu">
                    <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 class="sub-menu">
                    <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>

So, yours also work thanks but can you point out the difference I want to know + learn — GrandLine Rookie, Dec 10 '21 at 14:12

score 2 · Answer 3 · answered Dec 09 '21 at 17:40

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>

Your welcome! You can choose it as an answer for others to use. — Zahra Mirzaei, Dec 10 '21 at 09:39

How to make dropdown menu appears below

3 Answers3