我在设置下拉列表的位置时遇到问题。它隐藏在转盘(滑块)的后面。将轮播区的位置设置为绝对值时,它将使导航栏透明,并且轮播的图像会显示在导航栏中。请帮助我。
这是代码,我正在从数据库中获取导航栏链接,因此不会在导航栏中生成链接。但是仍然可以帮助我的任何样式改进。
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()">☰</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/