<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>列表中的导航菜单应用</title>
<style type="text/css">
body{font-size:13px}
ul,li{list-style-type:none;padding:0px;margin:0px}
.menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2}
.optn{width:190px;line-height:28px;border-top:dashed 1px #ccc}
.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;border:solid 2px #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" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
var curY; //获取所选项的Top值
var curH; //获取所选项的Height值
var curW; //获取所选项的width值
var srtY; //设置提示箭头的Top值
var srtX; //设置提示箭头的Left值
var objL; //设置当前对象
function setInitValue(obj){
curY = obj.offset().top
curH = obj.height();
curW = obj.width(); //.optn的width值
srtY = curY + (curH / 2)+"px"; //设置提示箭头的TOP值
srtX = curW - 5 + "px"; //设置提示箭头的left值
}
$(".optn").mouseover(function() {
/* Act on the event */
objL = $(this);//获取当前对象
setInitValue(objL);//设置当前位置
var allY = curY - curH + "px";//设置提示框的Top值
objL.addClass("optnFocus");//增加获取焦点时的样式
// objL.next("ul").show().css({"top" : "8px" , "left" : curW})
objL.next("ul").show().css({"top" : allY , "left" : curW})
$("#sort").show().css({"top" : srtY , "left" : srtX});
}).mouseout(function(){
$(this).removeClass("optnFocus");
$(this).next("ul").hide();
$("#sort").hide();
})
$(".tip").mouseover(function(){
$(this).show();
objL = $(this).prev("li");
setInitValue(objL);
objL.addClass("optnFocus");
$("#sort").show().css({"top" : srtY , "left" : srtX})
}).mouseout(function(){
$(this).hide();
$(this).prev("li").removeClass("optnFocus");
$("#sort").hide();
})
})
</script>
</head>
<body>
<ul>
<li class="menu">
<div>
<img src="Images/icon.gif" />
<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>
<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="Images/sort.gif" alt=""/>
</li>
</ul>
</body>
</html>
