我在设置下拉列表的位置时遇到问题。它隐藏在转盘(滑块)的后面。将轮播区的位置设置为绝对值时,它将使导航栏透明,并且轮播的图像会显示在导航栏中。请帮助我。

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



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;



}

最佳答案

您的下拉菜单隐藏在转盘后面,因为您在为position: absolute分配了下拉菜单后尚未设置z-index。 z-index用于将具有位置的图层移到顶部或底部。试试这个代码。

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

关于javascript - CSS-下拉列表隐藏在悬停的轮播部分后面,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49713652/

10-12 12:51
查看更多