Utilizing bootstrap for my website, the main navigation employs dropdowns for secondary choices.
I am encountering an issue in IE10 only (works fine everywhere else) where the dropdown menu is inconsistently accessible. Additionally, if you manage to access the second-level choices, they disappear upon hovering off of them. Essentially, as you hover down the list of menu items, the one above will vanish when you hover onto the item below it. This appears to be a dual problem: one related to accessing the dropdown itself (potentially due to padding issues), and the other being the unprecedented disappearing act.
I have created a fiddle showcasing the issue
(**Make sure to adjust the width of the Result panel while viewing the fiddle to prevent collapsing on mobile)
The HTML structure is fairly straightforward:
<div class="container">
<div class="row">
<div class="navbar navbar-inverse" role="navigation">
<div class="navbar-collapse collapse"><!--NAVIGATION-->
<ul class='nav navbar-nav'>
<li class='first'><a href="#">Getting Around</a>
<ul>
<li><a href="#" tabindex="17">Find Your Ride</a></li>
<li><a href="#" tabindex="18">Transit Overview</a></li>
<li><a href="#" tabindex="19">Carpool/Vanpool</a></li>
<li><a href="#" tabindex="20">Biking & Walking</a></li>
</ul>
</li>
<li><a href="#">Travel Training</a>
<ul>
<li><a href="#">Do It Yourself</a></li>
<li><a href="#">Transit Orientation</a></li>
<li><a href="#">Transit Ambassadors</a></li>
<li><a href="#">Schedule a Training</a></li>
</ul>
</li>
<li><a href="#" tabindex="26">Senior Safe Driving</a></li>
<li><a href="#" tabindex="27">Programs & Services</a>
<ul>
<li><a href="#" tabindex="28">Mobility Programs & Services Locator</a></li>
<li><a href="#" tabindex="29">Mobility Programs Overview</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Your assistance with this perplexing issue would be greatly appreciated!