I am using this drop down menu code: http://javascript-array.com/scripts/jquery_simple_drop_down_menu/ and I am trying (with no success) to keep the top level highlighted even when the mouse moves down to the lower links on a dropdown menu.
The html:
<ul id="jsddm">
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">jQuery Plugin</a></li>
<li><a href开发者_StackOverflow社区="#">Ajax Navigation</a></li>
</ul>
</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>
</li>
<li><a href="#">Navigation</a></li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">Help</a></li>
</ul>
The original Javascript:
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').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;
P.S. Three cheers to the guy that wrote this, I love it, keeps my html super clean and easy to update.
Add
ul li:hover {
background:...
}
In your stylesheet and you should get the desired effect. because your submenu is nested within your list item - whilst hovering over your sub-menu you a still effectively hovering over its parent (list item) also.
You can keep the hover on ul li a - if you like but this won't keep your styles as the submenu is not nested within it.
精彩评论