javascript - 菜单悬停状态

Question

我正在尝试在以下页面上创建悬停状态:

http://acemenu.zzcreative.com/nav/

当您将鼠标悬停在菜单项上时，会出现一个下拉子菜单。我希望在将鼠标移到其中一个子菜单项上时菜单保持显示。

当将鼠标从子菜单和顶级菜单移开时，我希望子菜单关闭。

HTML:

    <div id="manual-menu">
    <ul>
    <li><a href="#"><span>Performance</span></a></li>
    <li><a href='#' class="show_hide_standards"><span>Standards</span></a></li>
    <li><a href='#' class="show_hide_marketing"><span>Marketing</span></a></li>
    </ul>
    </div>
    <div class="slidingDiv_standards">
    <ul id="menutabsstandards">
    <li><a href='#'><span>Hyundia Aros</span></a></li>
    <li><a href='#'><span>Workshop Enhancement Standards Phase 1</span></a></li>
    <li><a href='#'><span>Workshop Enhancement Standards Phase 2</span></a></li>
    </ul>
    </div>
    <div class="slidingDiv_marketing">
    <ul id="menutabsmarketing">
    <li><a href='#'><span>Aftersales Interactive Marketing Manager (AIMM)</span></a></li>
    <li><a href='#'><span>Hyundai Data Insight (HDI)</span></a></li>
    </ul>
    </div>

CSS:

#menutabsstandards, #menutabsmarketing, { list-style: url(images/arrow.png); margin: 4px 0; list-style-position:outside; }

.slidingDiv_standards li { margin: -5px 2px 0 0; list-style-position:outside; }
.slidingDiv_standards a { color: #444; font-size: 0.6em; text-decoration: none; text-transform: uppercase; }

.slidingDiv_marketing li { margin: -5px 2px 0 0; list-style-position:outside; }
.slidingDiv_marketing a { color: #444; font-size: 0.6em; text-decoration: none; text-transform: uppercase; }

.slidingDiv { height: 29px; width: 890px; background-color: #fff; position: absolute; top: 73px; left: 70px; opacity:0.8; filter:alpha(opacity=80); }
.show_hide { display:none; }
 .slidingDiv_standards { min-height: 20px; width: 794px; background-color: #fff; position: absolute; top: 23px; left: 0; padding-left: 96px; }
 .show_hide_standards { display:none; }
.slidingDiv_marketing { min-height: 20px; width: 701px; background-color: #fff; position: absolute; top: 23px; left: 0; padding-left: 189px }
.show_hide_marketing { display:none; }

#main-nav ul { list-style: none; margin: 0; padding: 0; }
#main-nav ul li { display: inline-block; margin: 1px 1em 0 1em; padding: 0.15em 0.75em 0.25em 0.75em; }
#main-nav ul li.active a { color: #fff; text-decoration: none; }

#manual-menu ul, #manual-menu li, #manual-menu span, #manual-menu a { margin: 0; padding: 0; position: relative; text-transform:uppercase; }
#manual-menu a { color: #444; display: inline-block; font-family: modern_hmedium, sans-serif;   font-size: 0.7em; text-align: left; text-decoration: none; text-shadow: none; }
#manual-menu ul { list-style: none; margin-top:8px; }
#manual-menu > ul > li { float: left; border-right: 1px solid #ccc; line-height: 10px;       padding: 0 15px; }

js:

$(".slidingDiv_standards").hide();
$(".show_hide_standards").show();
$("#menutabsstandards").show();

$('.show_hide_standards').hover(function(){
$(".slidingDiv_standards").slideToggle();
});

$(".slidingDiv_marketing").hide();
$(".show_hide_marketing").show();
$("#menutabsmarketing").show();

$('.show_hide_marketing').hover(function(){
$(".slidingDiv_marketing").slideToggle();
});


});

Answer 1

您的整个设置似乎不是很可靠。你想要的是一个 suckerfish 菜单。阅读以下文章来解决您的问题:

http://www.htmldog.com/articles/suckerfish/dropdowns/