Question

我正在使用此下拉菜单代码：http://javascript-array.com/scripts/jquery_simple_drop_down_menu/我正在尝试（但没有成功），即使鼠标向下移动到下拉菜单中的下方链接，也会保持顶级高亮显示。

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="#">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>

原始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。写这篇文章的人有三个欢呼，我喜欢它，让我的html超级干净，易于更新。

Answer 1

添加

ul li:hover {
  background:...
}

在样式表中，您应该获得所需的效果。因为您的子菜单嵌套在列表项中 - 当您将鼠标悬停在子菜单上时，您仍然可以有效地将鼠标悬停在其父项（列表项）上。

你可以将鼠标悬停在ul li a上 - 如果你愿意，但这不会保留你的风格，因为子菜单没有嵌套在其中。

调整下拉菜单，使顶级保持突出显示

1 个答案: