基于jQuery-menu-aim所制作出的左侧商城产品导航菜单，解决了示例中的鼠标滑入滑出的菜单仍然显示的问题！

此示例一是解决了鼠标滑出后的菜单仍然显示的问题，二是解决了如果从A菜单滑出，然后进入A菜单，子菜单不显示的问题。

菜单截图

html：

<section>
<h2>器材分类</h2>
<ul role=”menu”>
<li data-submenu-id=”submenu-air-pump”>
<a href=”#”>气泵</a>
<div id=”submenu-air-pump”>
<h2>气泵</h2>
<div>
<div>
<h3><a href=”#” target=”_blank”>气孔</a></h3>
<div><a href=”#” target=”_blank”>单头</a><a href=”#” target=”_blank”>双头</a></div>
</div>
<div>
<h3><a href=”#” target=”_blank”>品牌</a></h3>
<div><a href=”#” target=”_blank”>ADA亚迪亚</a><a href=”#” target=”_blank”>BOSS</a><a href=”#” target=”_blank”>BOYU</a><a href=”#” target=”_blank”>HDOM</a><a href=”#” target=”_blank”>JET</a><a href=”#” target=”_blank”>佳宝</a><a href=”#” target=”_blank”>日生</a><a href=”#” target=”_blank”>日胜电器</a><a href=”#” target=”_blank”>松宝</a><a href=”#” target=”_blank”>海星</a><a href=”#” target=”_blank”>西龙</a><a href=”#” target=”_blank”>迪胜</a><a href=”#” target=”_blank”>银湖</a></div>
</div>
</div>
</div>
</li>
<li data-submenu-id=”submenu-filter-means”>
<a href=”#”>过滤装置</a>
<div id=”submenu-filter-means”>
<h2>过滤装置</h2>
<div>
<div>
<h3><a href=”#” target=”_blank”>过滤器材</a></h3>
<div><a href=”#” target=”_blank”>悬挂式生化过滤器</a><a href=”#” target=”_blank”>内置过滤器</a><a href=”#” target=”_blank”>顶部过滤器</a></div>
</div>
<div>
<h3><a href=”#” target=”_blank”>品牌</a></h3>
<div><a href=”#” target=”_blank”>ADA 亚迪亚</a><a href=”#” target=”_blank”>HDOM</a><a href=”#” target=”_blank”>海星HX</a><a href=”#” target=”_blank”>佳宝</a><a href=”#” target=”_blank”>日生</a><a href=”#” target=”_blank”>AMARA</a><a href=”#” target=”_blank”>AQUILA</a><a href=”#” target=”_blank”>松宝</a><a href=”#” target=”_blank”>西龙XL</a></div>
</div>
</div>
</div>
</li>
<li data-submenu-id=”submenu-temperature-control-device”>
<a href=”#”>温控装置</a>
<div id=”submenu-temperature-control-device”>
<h2>温控装置</h2>
<div>
<div>
<h3><a href=”#” target=”_blank”>全部</a></h3>
<div><a href=”#” target=”_blank”>加热棒</a><a href=”#” target=”_blank”>温度计</a></div>
</div>
</div>
</div>
</li>
<li data-submenu-id=”submenu-filter-material”>
<a href=”#”>过滤材料</a>
<div id=”submenu-filter-material”>
<h2>过滤材料</h2>
<div>
<div>
<h3><a href=”#” target=”_blank”>全部</a></h3>
<div><a href=”#” target=”_blank”>陶瓷环</a><a href=”#” target=”_blank”>活性炭</a><a href=”#” target=”_blank”>生物球</a><a href=”#” target=”_blank”>吸氨沸石</a><a href=”#” target=”_blank”>活性生物珠</a><a href=”#” target=”_blank”>火山岩石</a><a href=”#” target=”_blank”>活菌环</a><a href=”#” target=”_blank”>草酸泥碳苔</a><a href=”#” target=”_blank”>软水树脂</a></div>
</div>
</div>
</div>
</li>
<li data-submenu-id=”submenu-pharmaceutical-agent”>
<a href=”#”>药剂水剂</a>
<div id=”submenu-pharmaceutical-agent”>
<h2>药剂水剂</h2>
<div>
<div>
<h3><a href=”#” target=”_blank”>全部</a></h3>
<div><a href=”#” target=”_blank”>杀菌水</a><a href=”#” target=”_blank”>水草液肥</a><a href=”#” target=”_blank”>水质安定剂</a><a href=”#” target=”_blank”>水质澄清剂</a><a href=”#” target=”_blank”>万能鱼药</a><a href=”#” target=”_blank”>净水剂</a><a href=”#” target=”_blank”>黑水</a><a href=”#” target=”_blank”>硝化细菌</a><a href=”#” target=”_blank”>除苔素</a><a href=”#” target=”_blank”>白点净</a><a href=”#” target=”_blank”>除氯水</a><a href=”#” target=”_blank”>肤霉剂</a><a href=”#” target=”_blank”>除蜗牛剂</a><a href=”#” target=”_blank”>蓝宝液</a></div>
</div>
</div>
</div>
</li>
<li data-submenu-id=”submenu-gadgets”>
<a href=”#”>小工具</a>
<div id=”submenu-gadgets”>
<h2>小工具</h2>
<div>
<div>
<h3><a href=”#” target=”_blank”>全部</a></h3>
<div><a href=”#” target=”_blank”>磁力刷</a><a href=”#” target=”_blank”>水草夹</a><a href=”#” target=”_blank”>捞鱼网</a><a href=”#” target=”_blank”>换水/抽水管</a></div>
</div>
</div>
</div>
</li>
<li data-submenu-id=”submenu-feed”>
<a href=”#”>饲料</a>
<div id=”submenu-feed”>
<h2>饲料</h2>
<div>
<div>
<h3><a href=”#” target=”_blank”>全部</a></h3>
<div><a href=”#” target=”_blank”>增艳增彩</a><a href=”#” target=”_blank”>金鱼/锦鲤鱼粮</a><a href=”#” target=”_blank”>热带鱼粮</a><a href=”#” target=”_blank”>龟粮</a></div>
</div>
</div>
</div>
</li>
</ul>
</section>

css：/* 左侧产品导航 */

.left-sidebar {
border: 0 !important;
word-wrap: break-word;
_display: inline;
_overflow: hidden;
_overflow-y: visible;
float: left;
width: 199px;
margin-left: 0px;
margin-right: -199px;
height: 600px;
padding-top: 10px;
background-image: url(../images/product/main-menu-bg.png);
background-repeat: repeat-x;
background-position: 0px 40px;
}
.left-sidebar h2 {
position: absolute;
font-family: “Microsoft Yahei”;
font-size: 16px;
line-height: 24px;
color: #404040;
display: block;
float: left;
height: 24px;
width: 120px;
margin-left: 18px;
padding-left: 46px;
border-bottom-width: 6px;
border-bottom-style: solid;
border-bottom-color: #6593F0;
font-weight: bold;
}

.recommend {
border: 0 !important;
word-wrap: break-word;
_display: inline;
_overflow: hidden;
_overflow-y: visible;
float: left;
width: 801px;
margin-left: 199px;
margin-right: -1000px;
height: 600px;
padding-top: 40px;
}
.main-menu {
position: absolute;
float: left;
width: 166px;
height: 332px;
padding-top: 14px;
padding-bottom: 14px;
margin-top: 30px;
margin-left: 18px;
list-style: none;
background-color: #4D4D4D;
z-index: 2;
}
.main-menu li {
width: 126px;
height: 36px;
padding-left: 40px;
color: #B6B6B6;
background-image: url(../images/product/main-menu-li-bg.png);
background-repeat: no-repeat;
background-position: 136px 6px;
}
.main-menu li a {
font-family: “Microsoft Yahei”;
float: left;
font-size: 13px;
color: #B6B6B6;
height: 22px;
line-height: 22px;
padding-top: 13px;
display: block;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #4D4D4D;
font-weight: normal;
}
.ie6 .main-menu li a {
color: #B6B6B6;
}
.main-menu li a:hover,
.main-menu li a.maintainhover {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #6593F0;
color: #6593F0;
font-weight: bold;
}
.popover {
top: 1px;
left: 166px;
position: absolute;
float: left;
display: none;
width: 420px;
height: 367px;
overflow: hidden;
background-image: url(../images/product/popover-bg.png);
background-repeat: repeat-y;
}
.popover h2 {
position: relative;
color: #DCDCDC;
width: 80px;
margin-left: 0;
padding-left: 0;
padding-right: 340px;
padding-top: 26px;
border-bottom: none;
overflow: hidden;
text-align: right;
}
.ie6 .popover h2 {
margin-left: 0;
}
.popover-content {
float: left;
width: 420px;
height: 322px;
overflow: hidden;
}
.popover-content .item {
float: left;
width: 420px;
padding: 16px 0;
position: relative;
left: 0;
top: 0;
}
.ie6 .popover-content .item {
padding: 32px 0;
top: -16px;
}
.popover-content .item .class-tag {
position: absolute;
left: -1px;
margin-left: 90px;
float: left;
width: 330px;
overflow: hidden;
z-index: 4;
}
.main-menu .popover-content .item a {
font-size: 12px;
color: #CACACA;
font-family: Tahoma, Verdana, Arial, /5b8b/4f53, “DejaVu Sans”, sans-serif;
height: 14px;
line-height: 14px;
padding: 0 12px;
display: block;
font-weight: normal;
border-left-width: 1px;
border-bottom: none;
border-left-style: solid;
border-left-color: #CACACA;
margin: 4px 0;
}
.popover-content .item a:hover {
color: #CD0200;
font-weight: normal;
border-bottom: none;
}
.main-menu .popover-content .item .first {
border-left: none;
padding: 0 12px;
}
.main-menu .popover-content .item h3 {
display: block;
position: absolute;
width: 90px;
height: 90px;
z-index: 10;
float: left;
background-image: url(../images/product/popover-bg.png);
background-repeat: repeat-y;
line-height: 14px;
overflow: hidden;
}
.main-menu .popover-content .item h3 a {
font-size: 12px;
float: left;
width: 80px;
padding-left: 0;
padding-right: 0;
text-align: right;
color: #6593F0;
font-family: Tahoma, Verdana, Arial, /5b8b/4f53, “DejaVu Sans”, sans-serif;
height: 14px;
line-height: 14px;
display: block;
border-bottom: none;
border-left: none;
font-weight: normal;
padding-right: 10px;
}
.popover-content .item h3 a:hover {
color: #CD0200;
font-weight: normal;
border-bottom: none;
}

JS：

<script>
var $menu = $(“.main-menu”);
$menu.menuAim({
activate: activateSubmenu,
deactivate: deactivateSubmenu,
exitMenu: exitMenuSubmenu
});
function activateSubmenu(row) {
var $row = $(row),
submenuId = $row.data(“submenuId”),
$submenu = $(“#” + submenuId),
height = $menu.outerHeight(),
width = $menu.outerWidth();

// Show the submenu
$submenu.css({
display: “block”,
// top: 1,
// left: width – 0,  // main should overlay submenu
height: height – 2  // padding for main dropdown’s arrow
});

// Keep the currently activated row’s highlighted look
$row.find(“a”).addClass(“maintainhover”);
}

function deactivateSubmenu(row) {
var $row = $(row),
submenuId = $row.data(“submenuId”),
$submenu = $(“#” + submenuId);

// Hide the submenu and remove the row’s highlighted look
$submenu.css(“display”, “none”);
$row.find(“a”).removeClass(“maintainhover”);
}

function exitMenuSubmenu(row) {
$(“.popover”).css(“display”, “none”);
$(“a.maintainhover”).removeClass(“maintainhover”);
return true;
}
</script>