I'm facing an issue with the dropdown menu in my header file that I include on every page of my website. The dropdown list works fine up to the 2nd element, but then it becomes unclickable. I've checked the code for the dropdown list, and it seems to be working perfectly in this demo, but not on my actual webpage. Specifically, I can't select "Region3" or the 2nd child of "Region2" (Manage Region). Whenever I hover over the third element, it disappears from the screen.
Can you help me identify the problem?
.parent {
display: block;
position: relative;
float: right;
line-height: 50px;
background-color: #a9cc77;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #000;
text-decoration: none;
Font-weight:bold;
}
.parent:hover>ul {
display: block;
position: absolute;
}
.parent:hover>.child {
display: block;
position: absolute;
top: 100%;
left: 0;
}
.child {
display: none;
position: absolute;
top: 100%;
left: 0;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #000000;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
z-index: 999;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color:#04ba0d;
}
.parent li:hover {
background-color: #14871a;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
} <div class="navbar navbar-inverse set-radius-zero" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1 class="coolShadow" STYLE="margin-left:145px;font-weight:BOLD;text-align:center;" >SYSTEM</h1>
</div>
<div class="right-div" style="padding:25px 0px 5px 0px;">
<a href="logout.php" class="btn btn-danger pull-right" style="margin-right:0px;">LOG ME OUT</a>
</div>
</div>
</div>
<!-- LOGO HEADER END-->
<section class="menu-section">
<div class="container">
<div class="row ">
<div class="col-md-12">
<div class="navbar-collapse collapse ">
<ul id="menu">
<li class="parent"><a href="change-password.php">Change Password</a></li>
<li class="parent"><a href="#">Configuration<i class="fa fa-angle-down"></i></a>
<ul class="child">
<li class="parent"><a href="#">Region1 <span class="expand">»</span></a>
<ul class="child">
<li><a href="add-region.php">Add Region</a></li>
<li><a href="manage-region.php">Manage Region</a></li>
</ul>
</li>
<li class="parent"><a href="#">Region2 <span class="expand">»</span></a>
<ul class="child">
<li><a href="add-region.php">Add Region</a></li>
<li><a href="manage-region.php">Manage Region</a></li>
</ul>
</li>
<li class="parent"><a href="#">Region3 <span class="expand">»</span></a>
<ul class="child">
<li><a href="add-region.php">Add Region</a></li>
<li><a href="manage-region.php">Manage Region</a></li>
</ul>
</li>
</ul>
</li>
<li class="parent"><a href="dashboard.php">Home</a></li>
</ul>