During implementing Menu control using jquery and css I got the following issue: Here is live demo I've created to show my current problem When I hover, for example, on 'Menu Item 1' this item has changed style (background: white
and it's ok, but when I want to cross it's children (Sub Menu Item 1, Sub Menu Item 2 etc.) Menu Item 1 must keep background: white; but it doesn't work in my example. Also, when hover on Menu Item 2, previous style of menu item (Menu Item 1) should be changed to default. Does anybody know how to solve this?Here is the code from the fiddle in case of link-rot:HTML<ul id="jsddm"> <li><a href="http://stackoverflow.com/questions/14042655/#">Menu Item 1</a> <ul> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 1</a></li> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 2</a></li> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 3</a></li> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 4</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/14042655/#">Menu Item 2</a> <ul> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 1</a></li> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 2</a></li> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 3</a></li> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 4</a></li> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 5</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/14042655/#">Menu Item 3</a> <ul> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 1</a></li> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 2</a></li> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 3</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/14042655/#">Menu Item 4</a></li></ul>?Scriptvar 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;*/}?
and it's ok, but when I want to cross it's children (Sub Menu Item 1, Sub Menu Item 2 etc.) Menu Item 1 must keep background: white; but it doesn't work in my example. Also, when hover on Menu Item 2, previous style of menu item (Menu Item 1) should be changed to default. Does anybody know how to solve this?Here is the code from the fiddle in case of link-rot:HTML<ul id="jsddm"> <li><a href="http://stackoverflow.com/questions/14042655/#">Menu Item 1</a> <ul> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 1</a></li> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 2</a></li> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 3</a></li> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 4</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/14042655/#">Menu Item 2</a> <ul> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 1</a></li> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 2</a></li> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 3</a></li> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 4</a></li> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 5</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/14042655/#">Menu Item 3</a> <ul> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 1</a></li> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 2</a></li> <li><a href="http://stackoverflow.com/questions/14042655/#">Sub Menu Item 3</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/14042655/#">Menu Item 4</a></li></ul>?Scriptvar 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;*/}?