I am facing an issue with my code:
/**** DropDown Css *****/
.inner_menu ul#nav > li span {
display: inline-block;
height: 15px;
vertical-align: middle;
width: 20px;
background: url(../images/drp_arw_dwn.png) no-repeat center;
margin-left: 10px;
}
.inner_menu ul#nav > li:hover span {
background: url(../images/drp_arw.png) no-repeat center;
}
.inner_menu ul#nav > li:hover .subnav {
display: block;
}
.subnav {
position: absolute;
padding-top: 18px;
display: none;
left: 50%;
margin-left: -100px;
border-style: solid;
border-width: 5px;
border-color:#2c91da
}
.subnav ul {
background: #333;
width: 200px;
padding-top: 15px;
}
.subnav ul li {
display: block;
margin: 0;
padding: 0 0 0 20px;
}
.subnav ul li a {
color: #fff;
font-size: 18px;
padding-bottom: 5px;
}
.subnav ul li:hover a {
color: #2c91da;
display: block;
}
/****************** Nav Menu *****************/
.header .wrapper:after {
opacity: 0.5;
}
.dashboard_page {
position: relative;
background: #fff;
padding: 42px 0;
}
.dashboard_page .wrapper {
position: relative;
z-index: 9;
}
.dashboard_page:after {
left: 0;
top: 0;
width: 100%;
height: 370px;
position: absolute;
content: "";
background: #f7f8f9;
pointer-events: none;
}
.inner_menu {
margin: 7px 0 0 0;
padding: 0;
display: block;
}
.inner_menu ul#nav {
margin: 0;
padding: 0;
display: inline-block;
border-right: 1px solid #f2f2f2;
box-shadow: 0 5px 4px rgba(0, 0, 0, 0.3);
}
.inner_menu ul#nav > li {
margin: 0;
padding: 0;
height: 52px;
line-height: 52px;
display: block;
float: left;
border-left: 1px solid #f2f2f2;
position: relative;
}
.inner_menu ul#nav > li > a {
display: block;
color: #2f2f2f;
font-size: 18px;
font-family: 'Lato', sans-serif;
margin: 0;
padding: 0 27px;
border-style: solid;
border-width: 5px;
}
.inner_menu ul#nav > li:after {
position: absolute;
width: 38px;
left: 50%;
margin-left: -19px;
content: "";
background: url(../images/menu_arw.png) no-repeat;
height: 20px;
bottom: -35px;
z-index: 9;
display: none;
}
.inner_menu ul#nav > li:hover:after {
display: block;
}
.inner_menu ul#nav > li.active:after {
display: block;
}<div class="inner_menu">
<div class="toggle"></div>
<ul id="nav">
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Trackers</a>
<div class="subnav">
<ul>
<li><a href="#">Sub Menu 1</a>
</li>
<li><a href="#">Sub Menu 2</a>
</li>
</ul>
</div>
</li>
</ul>
</div>While using Internet Explorer, I encounter a problem where the dropdown disappears when I try to move my cursor below it in order to click on it. As a result, I am unable to click on it.
Can anyone advise me on what could be causing this issue?