I'm struggling with adjusting the position of my dropdown list. It keeps hiding behind the carousel (slider). When I set the position of the carousel section to absolute, it causes the navbar to become transparent and the images from the carousel show inside the navbar. I need assistance in resolving this issue.
Here is the code snippet where I am fetching navbar links from the database, so the links are dynamically generated in the navbar. Any suggestions for style improvements that could help resolve the issue would be appreciated.
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;