CSS - Dropdown list hides behind the carousel section on hover

Question

I'm having a problem with setting the position of my dropdown-list. it hides behind the carousel (slider). On setting the position of carousel section to absolute it makes the navbar transparent and images of carousel show inside the navbar. Please help me out of this.

This is the code and I am fetching navbar links from the database so links are not going to generate in the navbar. But still any style improvement that could help me out.

 function myFunction() { var x = document.getElementById("my-topnav"); if (x.className === "top-nav") { x.className += " responsive"; } else { x.className = "top-nav"; } } 

 .top-nav { background-color: #f2f2f2; font-weight: bolder; overflow: hidden; position:relative; z-index:50; } .top-nav ul { padding: 0; margin: 0; list-style-type: none; } .top-nav .main a{ display: block; text-align: center; padding: 14px 16px; color: #808080; text-decoration: none; } .top-nav .main .icon { display: none; } .top-nav .main li{ display: inline-block; vertical-align: top; position: relative; } .top-nav .main > li > a{ padding: 20px; } .top-nav .dropdown { position: absolute; background-color: #d9d9d9; width: 200px; left: 0; display: none; } .top-nav .dropdown ul{ left: 200px; } .top-nav .dropdown li a{ padding-top: 10px; padding-bottom: 10px; } .top-nav .dropdown li, .top-nav .dropdown li { display: block; width: 100%; } .top-nav ul li:hover .dropdown{ display: block; } .top-nav .main li:hover > a{ background-color: #4dc47d; color: white; } .top-nav .uni-name { text-transform: capitalize; font-weight: bolder; margin-right: 50px; } 

  //from navigation.php <nav class="top-nav" id="my-topnav"> <ul class="main"> <li> <a href="../View/index.php" class="uni-name name-style">Abasyn University Islamabad Campus</a> </li> <?= show_menu(); ?> <li><a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a></li> </ul> </nav> //from the controller file while ($row = mysqli_fetch_assoc($result)) { # code... if ($row['page']) { # code... $menu .= '<li><a href="index.php?page_name=about&cat_id='.$row['cat_id'].'">'.$row['cat_title'].'</a>'; } else { # code... $menu .= '<li><a href="index.php">'.$row['cat_title'].'</a>'; } $menu .='<ul class="dropdown">'.generate_multilevel_menus($con,$row['cat_id']).'</ul>'; $menu .='</li>'; } return $menu; } 

Answer 1

Your dropdown is hiding behind the carousel because you have not set z-index for the dropdown after you assign position: absolute to it. z-index is for bringing the layers with position to the top or bottom. Try this code.

.top-nav .dropdown {
  position: absolute;
  background-color: #d9d9d9;
  width: 200px;
  left: 0;
  display: none;
  z-index: 99999;
}