I am trying to create a Navbar in my react app and the Navbar's dropdown doesn't appear over everything like a normal Dropdown. Excuse my CSS, I've been fooling around with the position and the z-index for a while now so I'm sure there's some thing's in there that don't make any sense lol.

Whenever I try and and inspect the code on the chrome console, I can tell that the z-index should be placing them on top of the NavBar and the position is relative so, shouldn't that do it? Any help would be greatly appreciated!

I attached a photo of the problem below as well.

Here is my DropDown HTML:

<ul className="topnav" id="myTopnav">
  <li>
    <img src={logo} id="logo" />
  </li>
  <li>
    <a href="default.asp">Barbershop Apparel</a>
  </li>
  <li>
    <a href="news.asp">Politics</a>
  </li>
  <li>
    <a href="contact.asp">Business</a>
  </li>
  <li className="dropdown">
    <a href="#">
      Dropdown <i className="Dropdown-div"></i>
    </a>
    <div className="dropdown-content">
      <a id="dropdown-items" href="#">
        Link 1
      </a>
      <a id="dropdown-items" href="#">
        Link 2
      </a>
      <a id="dropdown-items" href="#">
        Link 3
      </a>
    </div>
  </li>
  <li>
    <a href="about.asp">Entertainment</a>
  </li>
  <li>
    <a href="about.asp">More</a>
  </li>
  <li>
    <img
      src={facebookLogo}
      id="logoFacebook"
      href="https://www.facebook.com/Barbershoptalk.posts"
    />
  </li>
  <li>
    <img
      src={instaLogo}
      id="logoInsta"
      href="https://www.instagram.com/thebarbershop.talk/"
    />
  </li>
</ul>

Here is my CSS:

/* navbar */
#logo {
    height: 90px;
    width: auto;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  #logoInsta {
    height: 65px;
    width: auto;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  #logoFacebook {
    height: 65px;
    width: auto;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  
  ul {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #0062b2;
    border-bottom: 2px solid #dd3333;
  }
  
  li {
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 30px 16px;
    text-decoration: none;
    font-family: "Titillium Web", sans-serif;
    font-size: 20px;
    position: relative;
    z-index: 10;
  }
  
  /* Change the link color on hover */
  li a:hover {
    background-color: #dd3333;
    color: white;
  }

 
  
  .dropdown-content {
    display: none;
    background-color: #dd3333;
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    padding: 12px 16px;
    position: relative;
    z-index: 10;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
    position: relative;
    border: solid 1px white;
z-index: 10;
  }
  
  .dropdown-items:hover {
    position: relative;
    list-style-type: inside;
    z-index: 10;
  }
  
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {
      display: none;
    }
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 600px) {
    .topnav.responsive {
      position: relative;
    }
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }

Picture of the problem

CodePudding user response：

try setting the dropdown to position:absolute then it will stop pushing your nav down and lay on top of it

CodePudding user response：

Yeah use position:absolute for your dropdown and try follow the DRY principle while coding