I am looking to have it so that when you hover over the nav bar the drop-down menu sits above/on-top of the main content, however at the moment when the menu drops down it is pushing the main image down and not sitting on top as I would expect the z-index property to do.

I have set the nav div to relative and also the main section div to relative but still with no joy!

Anyone out there able to help with this, please?

<div id="top-bar-container">
  <img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
  <i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
  <nav id="nav-bar">
    <ul id="test">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li>
        <a href="#">Services</a>
        <ul>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Branding</a></li>
          <li><a href="#">Consulting</a></li>
          <li><a href="#">SEO</a></li>
        </ul>
      </li>
      <li><a href="#">Our Work</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</div>

<div id="main-section">
  <img id="main-img" src="img/main-image.png" alt="" />
</div>


#top-bar-container {
  background-color: #ec671c;
  width: 100%;
  height: 75px;
}

#nav-bar {
  width: 75%;
  float: right;
  padding-right: 50px;
  position: relative;
  z-index: 1;
}

ul {
  list-style: none;
  padding: 0;
  float: right;
}

ul li {
  float: left;
  width: 90px;
  list-style: none;
  margin-top: 10px;
  text-align: center;
  padding: 5px;
}

ul li:hover {
  background-color: #ec671c;
  border-radius: 5%;
}

ul li a {
  text-decoration: none;
  color: white;
}

ul li a:hover {
   color: orange;
}

ul li ul {
  line-height: 25px; 
}

ul li ul li {
  display: none;
  font-size: 13px;
}

ul li ul li a {
  color: white;
}

ul li:hover ul li {
  display: block;
  padding: 0px;
}

#hamburger-icon {
  display: none;
  color: white;
  position: absolute;
  right: 20px;
   top: 20px; 
}

#hamburger-icon:hover {
  color: orange;
}

#main-section {
  width: 100%;
  height: 100vh;
  position: relative;
}

#main-img {
  width: 100%;
  height: 100vh;
}

2 Answers

0
Andu Andrici On Best Solutions

The #main-section is pushed down because the dropdown menu is positioned within the flow of the document.

When it is not hovered, it has display: none which takes it out of the DOM. When hover, it switches to position: block which puts it back - and it occupies space, and pushes the main-content down.

You can test this by adding the desired end-result display: block by default, and see how the document would look in it's expanded state.

You need to apply position: absolute to your drop-down, in order for it to not interfere with the document flow. You could also move the z-index: 1 directly on it, if that is the content that should be on top - or you could leave it on the parent, and should work just as well. - the z-index is not the problem here.

0
Community On

#top-bar-container {
  background-color: #ec671c;
  width: 100%;
  height: 75px;
}

#nav-bar {
  width: 75%;
  float: right;
  padding-right: 50px;

}

ul {
  list-style: none;
  padding: 0;
  float: right;
  background-color: #ec671c;

}

ul li {
  float: left;
  width: 90px;
  list-style: none;
  margin-top: 10px;
  text-align: center;
  padding: 5px;
  position:relative;
}

ul li:hover {
  background-color: #ec671c;
  border-radius: 5%;
}

ul li a {
  text-decoration: none;
  color: white;
}

ul li a:hover {
   color: orange;
}

ul li ul {
  line-height: 25px; 
}

ul li ul li {
  display: none;
  font-size: 13px;
}

ul li ul li a {
  color: white;
}

ul li:hover ul li {
  display: block;
  padding: 0px;
}

#hamburger-icon {
  display: none;
  color: white;
  position: absolute;
  right: 20px;
   top: 20px; 
}

#hamburger-icon:hover {
  color: orange;
}

#main-section {
  width: 100%;
  height: 100vh;
}

#main-img {
  width: 100%;
  height: 100vh;

}
#top-bar-container >nav >ul > li > ul{
 position:absolute;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>

</style>
</head>
<body>

<div id="top-bar-container">
  <img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
  <i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
  <nav id="nav-bar">
    <ul id="test">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li>
        <a href="#">Services</a>
        <ul>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Branding</a></li>
          <li><a href="#">Consulting</a></li>
          <li><a href="#">SEO</a></li>
        </ul>
      </li>
      <li><a href="#">Our Work</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</div>

<div id="main-section">
  <img id="main-img" src="img" alt="" />
</div>


</body>
</html>

hi You can do in the section ul>li{position:relative} and Also, put in a second UL {position:absolute}