After a long hiatus from posting here, I hope this isn't breaking any rules. For those who prefer visual examples, you can visit the live page at:
The drop-down menu functions perfectly in IE, Chrome, and Safari, but seems to be causing issues in Firefox. This has been tested on versions 11.0 and 25.0.1 of Firefox. The menu was recently converted from CSS hover effects to jQuery events for better compatibility with touch screens, which works well except for the Firefox problem.
To keep a record for future reference, here is the basic code snippet:
<script>
function hideAllDrops (){
document.getElementById('mainA-sub').style.display='none';
document.getElementById('mainB-sub').style.display='none';
document.getElementById('mainC-sub').style.display='none';
};
$(function(){
$( "html" ).click(function() {
hideAllDrops ();
});
$( "#mainA" ).click(function(){
hideAllDrops ();
document.getElementById('mainA-sub').style.display='block';
event.stopPropagation();
});
});
</script>
<li><a class="menuOpt" id="mainA">Guided Hunts</a>
<div class="nav_sub last" id="mainA-sub">
<div class="nav_sub_wrapper">
<ul>
<li><a href="/subPage">Option 1</a></li>
<li><a href="/subPage01">Option 2</a></li>
<li><a href="/subPage03">Option 3</a></li>
</ul>
</div><div class="sub_nav_end"></div>
</div>
</li>