javascript - CSS - 悬停时下拉列表隐藏在轮播部分后面

Question

我在设置下拉列表的位置时遇到问题。它隐藏在旋转木马( slider )后面。将旋转木马部分的位置设置为绝对时，它会使导航栏透明，并且旋转木马的图像显示在导航栏内。请帮我解决这个问题。

这是代码，我正在从数据库中获取导航栏链接，因此不会在导航栏中生成链接。但仍然可以帮助我解决任何样式改进问题。

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

您的下拉菜单隐藏在旋转木马后面，因为您在为下拉菜单分配 position: absolute 后没有为它设置 z-index。 z-index 用于将具有位置的层带到顶部或底部。试试这个代码。

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