Question

I ran into an issue today with an html/css map I am designing. For some reason the tabs are overlapping each other causing the text to be difficult to read and otherwise offsetting the functionality of the map. If anyone knows how to fix this issue please let me know. You can find a sample of the site below.

http://mikedemar.com/martygraff/index.html

Thanks in advance,

• Mike

Answer 1

or, you could remove z-index values from the css classes and use jQuery to add / remove higher z-index values to the current div:

$('.handle').on('mouseover', function(){
    $(this).css('z-index', '200000000');
});
$('.handle').on('mouseout', function(){
    $(this).css('z-index', '100000000');
});