Instead of a traditional menu, I have created tab functionality using jQuery to toggle the contents of each tab when hovered over. However, I am encountering an issue where the tab disappears before I can click on any links within the tab content.
You can view my current progress here: http://codepen.io/anon/pen/gvKqC
$j("#callouts>li>a").hover(function(){
$j('.callout-content').hide();
$j(this).next('.callout-content').css('display','block');
});
$j('.callout-content').mouseleave(function () {
$j('.callout-content').hide();
});
I did attempt another solution that kept the tab visible, but unfortunately, the tab contents remained even after moving the mouse away from the tabs.