以前看着京東，淘寶的導航做的真好，真想哪一天自己也能做出來這么漂亮功能全的導航菜單。今天弄了一下午終於自制成功，主要使用jQuery和CSS，實現功能基本和京東一樣。
功能介紹：
1、鼠標停留導航；
2、根據子列表的高度，自動調整對齊方式（頂端對齊/父類目對齊）；
3、父子類目樣式一致。
功能截圖：
源代碼：
<!DOCTaYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content=" keywords" />
<meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
body{font-size:12px}
ul,li{list-style-type:none;padding:0px}
.menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2}
.optn{width:190px;line-height:28px;border-top:dashed 1px #ccc;z-index:100;position:relative}
.content{padding-top:10px;clear:left}
a{text-decoration:none;color:#666;padding:10px}
.optnFocus{background-color:#fff;font-weight:bold}
div{padding:10px}
div img{float:left;padding-right:6px}
span{padding-top:3px;font-size:14px;font-weight:bold;float:left}
.tip{width:190px;position:absolute;padding:10px;display:none;}
.tip li{line-height:23px}
.focus{border:solid 1px red;background-color:#ccc}
</style>
<body>
<script type="text/javascript">
$(function(){
$('.optn').bind({mouseover:function(){
var liTop = 12;
var liLeft = $(this).offset().left+$(this).width();
if(($(this).offset().top)>($(this).next('ul').height())){
liTop = $(this).offset().top;
}
$(this).css('border-right','0');
$(this).next('.tip').show().css({'left':liLeft+'px',top:liTop+'px'});
$(this).addClass('focus');
$(this).next('.tip').addClass('focus');
},mouseout:function(){
$(this).next('.tip').hide();
$(this).removeClass('focus');
}});
});
</script>
<ul>
<li class="menu">
<div>
<span>電腦數碼產品</span>
</div>
<ul class="content">
<li class="optn"><a href="#">筆記本</a></li>
<ul class="tip">
<li><a href="#">筆記本1</a></li>
<li><a href="#">筆記本1</a></li>
<li><a href="#">筆記本1</a></li>
<li><a href="#">筆記本1</a></li>
<li><a href="#">筆記本1</a></li>
</ul><li class="optn"><a href="#">移動硬盤</a></li>
<ul class="tip">
<li><a href="#">移動硬盤1</a></li>
<li><a href="#">移動硬盤1</a></li>
<li><a href="#">移動硬盤1</a></li>
<li><a href="#">移動硬盤1</a></li>
<li><a href="#">移動硬盤1</a></li>
</ul><li class="optn"><a href="#">電腦軟件</a></li>
<ul class="tip">
<li><a href="#">電腦軟件1</a></li>
<li><a href="#">電腦軟件1</a></li>
<li><a href="#">電腦軟件1</a></li>
<li><a href="#">電腦軟件1</a></li>
<li><a href="#">電腦軟件1</a></li>
</ul><li class="optn"><a href="#">數碼產品</a></li>
<ul class="tip">
<li><a href="#">數碼產品1</a></li>
<li><a href="#">數碼產品1</a></li>
<li><a href="#">數碼產品1</a></li>
<li><a href="#">數碼產品1</a></li>
<li><a href="#">數碼產品1</a></li>
</ul>
</ul>
</li>
</ul>
<span></span>
</body>
</html>
遇到的問題及解決辦法：
1、鼠標指針位置獲取：
a、function(e){alert(e.pageX); alert(e.pageY);}//獲取鼠標當前位置
b、獲取元素的位置： $(this).offset().top $(this).offset().left//獲取元素的位置
注：以上兩種方法均在jQuery中適用，若使用JS中，需做適當改動
2、兩個區塊疊加時，邊框處理問題：
需要的效果是：
但是現實的效果卻是：
這個問題困擾了我半天，也在一個群里求救，一個好心的兄弟給我一段JS代碼，結果我還是沒用上，最后看了一個選項卡的實例，終於把這個問題搞定了。解決辦法是：
人為加寬父菜單的寬度，然后把右邊框設置成0，最后記得把父標簽的放在最頂端顯示
父菜單： border-right:0; z-index:100; position:relative; 寬度覆蓋子菜單
子菜單： 和父菜單背景色一樣