我正在尝试在下一页上创建悬停状态:
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();
});
});
答案 0 :(得分:0)
您的整个设置似乎不是很稳固。你想要的是一个suckerfish菜单。阅读以下文章以解决您的问题: