<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>列表中的导航菜单的应用</title>
<script src="jquery-2.1.0.js"></script>
<style type="text/css">
body{
font-size:13px;
}
ul, li {
list-style-type:none;
padding:0px;
margin:0px;
}
.menu {
width:190px;
line-height:28px;
border-top:1px dashed #00ffff;
}
.content {
padding-top:10px;
clear:left;
}
a {
text-decoration:none;
color:#666;
padding:10px;
}
.optn {
width:190px;
border:1px solid #E5d1A1;
}
.optnFocus {
background-color:#fff;
font-weight:bold;
}
div {
padding:10px;
}
div img {
float:left;
padding-right:5px;
}
span {
padding-top:3px;
font-size:14px;
font-weight:bold;
float:left;
}
.tip {
width:190px;
border:1px solid #ffa200;
position:absolute;
padding:10px;
background-color:#fff;
display:none;
}
.tip li {
line-height: 23px;
}
#sort {
position:absolute;display:none;
}
</style>
<script type="text/javascript">
$(function () {
var curY;
var curH;
var curW;
var strY;
var strX;
var objL;
//设置当前位置数值 参数obj为当前对象名称
function setInitValue(obj) {
curY = obj.offset().top;
curH = obj.height();
curW = obj.width();
strY = curY + (curH / 2) + "px";
strX = curW - 5 + "px";
}
//设置当前所选项的鼠标滑过事件
$(".optn").mouseover(function () {
objL = $(this);
setInitValue(objL);
var allY = curY - curH + "px";
objL.addClass("optnFocus");
objL.next("ul").show().css({ "top": strY, "left": strX });
})
.mouseout(function () {
$(this).removeClass("optnFocus");
$(this).next("ul").hide();
$("#sort").hide();
})
$(".tip").mousemove(function () {
$(this).show();
objL = $(this).prev("li");
setInitValue(objL);
objL.addClass("optnFocus");
$("#sort").show().css({ "top": strY, "left": strX });
})
.mouseout(function () {
$(this).hide();
$(this).prev("li").removeClass("optnFocus");
$("#sort").hide();
})
});
</script>
</head>
<body>
<ul>
<li class="menu">
<div>
<img alt=""src="15.jpg" />
<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="#">笔记本2</a></li>
<li><a href="#">笔记本3</a></li>
<li><a href="#">笔记本4</a></li>
<li><a href="#">笔记本5</a></li>
</ul>
<li class="optn"><a href="#">移动硬盘</a></li>
<ul class="tip">
<li><a href="#">移动硬盘1</a></li>
<li><a href="#">移动硬盘2</a></li>
<li><a href="#">移动硬盘3</a></li>
<li><a href="#">移动硬盘4</a></li>
<li><a href="#">移动硬盘5</a></li>
</ul>
<li class="optn"><a href="#">电脑软件</a></li>
<ul class="tip">
<li><a href="#">电脑软件1</a></li>
<li><a href="#">电脑软件2</a></li>
<li><a href="#">电脑软件3</a></li>
<li><a href="#">电脑软件4</a></li>
<li><a href="#">电脑软件5</a></li>
</ul>
<li class="optn"><a href="#">数码产品</a></li>
<ul class="tip">
<li><a href="#">数码产品1</a></li>
<li><a href="#">数码产品2</a></li>
<li><a href="#">数码产品3</a></li>
<li><a href="#">数码产品4</a></li>
<li><a href="#">数码产品5</a></li>
</ul>
</ul>
<img id="sort" src="13.jpg" />
</li>
</ul>
</body>
</html>
