While working on implementing a Menu control using jQuery and CSS, I encountered the following issue:
Here is a live demo that demonstrates my current problem
When I hover over 'Menu Item 1', this item successfully changes its style (background to white) which is correct. However, when I try to navigate to its children ('Sub Menu Item 1', 'Sub Menu Item 2' etc.), 'Menu Item 1' should maintain the white background but it does not work in my example.
Additionally, when hovering over 'Menu Item 2', the previous style of the menu item ('Menu Item 1') should revert to default.
Does anyone have a solution to this problem?
Here is the code from the fiddle in case the link becomes inaccessible:
HTML
<ul id="jsddm">
<li><a href="#">Menu Item 1</a>
<ul>
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 2</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
<li><a href="#">Sub Menu Item 4</a></li>
</ul>
</li>
<li><a href="#">Menu Item 2</a>
<ul>
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 2</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
<li><a href="#">Sub Menu Item 4</a></li>
<li><a href="#">Sub Menu Item 5</a></li>
</ul>
</li>
<li><a href="#">Menu Item 3</a>
<ul>
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 2</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
</ul>
</li>
<li><a href="#">Menu Item 4</a></li>
</ul>Script
var timeout = 200;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open() {
jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');
}
function jsddm_close() {
if (ddmenuitem) ddmenuitem.css('visibility', 'hidden');
}
function jsddm_timer() {
closetimer = window.setTimeout(jsddm_close, timeout);
}
function jsddm_canceltimer() {
if (closetimer) {
window.clearTimeout(closetimer);
closetimer = null;
}
}
$(document).ready(function() {
$('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);
});
document.onclick = jsddm_close;
CSS
/* menu styles */
#jsddm
{
margin: 0;
padding: 0;
float: left;
background: #4370b6;
width: 100%;
}
#jsddm > li
{
float: left;
list-style: none;
font: 12px Tahoma, Arial;
background: #4370b6;
padding: 0 5px;
}
#jsddm > li a
{
display: block;
padding: 0 15px;
text-decoration: none;
color: #FFF;
white-space: nowrap;
height: 62px;
line-height: 60px;
}
#jsddm > li a:hover
{
background: #FFF;
color: #4370b6;
padding: 0 15px;
-moz-box-shadow: 0 3px 5px rgba(0,0,0,17);
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,17);
box-shadow: 0 3px 5px rgba(0,0,0,17);
}
#jsddm li ul
{
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
}
#jsddm li ul li
{
float: none;
display: inline;
width: auto;
background: #0b0b0b;
color: #FFF;
}
#jsddm li ul li a
{
height: 40px;
min-width: 240px;
border-bottom: 1px solid #e9e9e9;
-moz-box-shadow: 0 3px 5px rgba(0,0,0,17);
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,17);
box-shadow: 0 3px 5px rgba(0,0,0,17);
background: #FFF;
color: #0b0b0b;
text-align: left;
line-height: 40px; /* IR Fix */
}
#jsddm li ul li a:hover
{
/*background: #4370B6;
color: #FFF;*/
}