Question

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

这是代码，我从数据库中获取导航栏链接，因此链接不会在导航栏中生成。但仍有任何风格改进可以帮助我。

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;
}

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

1 个答案: