Issue:
I'm encountering a problem with my HTML page that includes a navigation bar and a language menu. The behavior of the language menu changes depending on the order in which they are defined in the markup.
Note: The current focus is on demonstrating the technical issue, rather than styling.
Scenario 1: Navigation first, language menu second (z-index and mouseenter issues)
Scenario 2: Language menu first, navigation second (navigation malfunctioning on mouseenter)
Essential code snippet
(Also available at http://jsfiddle.net/GEjjW/)
<!doctype html>
<html>
<head>
<style>
html
{
background-color: gray;
}
body
{
width: 500px;
background-color: white;
}
#menu
{
margin-top: 30px;
}
#menu ul li
{
display: inline;
}
#language
{
float: right;
width: 130px;
margin-top: -70px;
padding: 10px;
}
#language div:hover, #language div.hover
{
color: black;
background-color: #ecfbef;
}
#language ul
{
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function()
{
$('#language > div').mouseenter(function()
{
$(this).addClass('hover');
$(this).find('ul').slideDown(200);
})
.mouseleave(function()
{
var div = $(this);
div.find('ul').slideUp(200);
setTimeout(function()
{
div.removeClass('hover');
}, 200);
});
});
</script>
</head>
<body>
<div id="menu">
<ul>
<li>Menu #1</li>
<li>Menu #2</li>
<li>Menu #3</li>
<li>Menu #4</li>
<li>Menu #5</li>
<li>Menu #6</li>
<li>Menu #7</li>
</ul>
</div>
<div id="language">
<div>
<span>Language: English</span>
<ul>
<li>English</li>
<li>German</li>
<li>Spanish</li>
</ul>
</div>
</div>
</body>
</html>
Question: How can I ensure that the language menu overlaps the navigation bar correctly without causing any disruptions or elements shining through?