<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>note_top.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.top-ul {
z-index: 1000;
position: absolute;
top: 0px;
background: #333;
100%;
left: 0px;
}
.top-ul #top-left-ul {
80%;
float: left;
}
.top-ul #top-right-ul {
20%;
float: right;
}
.top-ul #top-right-ul ul {
right: 0px;
position: absolute;
}
.top-ul ul {
font-family: "微软雅黑", "宋体", Arial;
margin-top: 0px;
list-style-type: none;
}
.top-ul #top-left-ul ul {
direction: rtl;
}
.top-ul #top-right-ul ul {
direction: ltr;
}
.top-ul ul li {
float: left;
}
.top-ul ul li a {
display: block;
height: 26px;
padding: 6px 10px 0 10px;
text-decoration: none;
color: #ddd;
}
.top-ul ul li a:hover {
background: #5EB2E5;
color: #FFFFFF;
}
.top-ul ul li .current_page_item {
background: #FFFFFF;
color: #6E7073;
}
.top-ul ul li .current_page_item:hover {
background: #FF8800;
color: #FFFFFF;
}
#menu {
font-family: "微软雅黑", "宋体", Arial;
font-size: 13px;
margin: 0 auto;
border: solid 1px #CCC;
120px;
display: none;
}
#menu a,#menu a:visited {
text-decoration: none;
text-align: center;
color: #c00;
display: block;
padding: 4px;
background-color: #fff;
border: 1px solid #fff;
height: 1em;
position: relative;
}
#menu a:hover span {
display: block;
height: 0;
0;
border: solid 8px #fff;
top: 4px;
position: absolute;
}
#menu a:hover span.left {
border-left-color: #333;
left: 0px;
}
#menu a:hover span.right {
border-right-color: #333;
right: 0px;
}
</style>
</head>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#more").mouseover(function(){
var more=$("#more");
var position=more.offset();;
var x=position.left;
$("#menu").attr("style","display:block;position:absolute;left:"+x+"");
}
);
$("#more").mouseout(function(){
$("#menu").css("display","none");
});
$("#menu").mouseout(function(){
$("#menu").css("display","none");
});
$(".menu_item").mouseover(function(){
$("#menu").css("display","block");
});
});
</script>
<body>
<div class="top-ul">
<div id="top-left-ul">
<ul>
<li>
<a href="">首页</a>
</li>
<li>
<a href="" class="current_page_item">记录</a>
</li>
<li>
<a href="">空间</a>
</li>
<li>
<a href="">好友</a>
</li>
<li>
<a href="">消息</a>
</li>
<li>
<a href="" style="" id="more">更多</a>
</li>
</ul>
</div>
<div id="top-right-ul">
<ul>
<li>
<a href="">登录</a>
</li>
<li>
<a href="">注册</a>
</li>
</ul>
</div>
</div>
<div id="menu">
<a href="#" class="menu_item"> <span class="left"></span> 附件 <span
class="right"></span> </a>
<a href="#" class="menu_item"> <span class="left"></span> 最近联系人 <span class="right"></span> </a>
<a href="#" class="menu_item"> <span class="left"></span> 整理
<span class="right"></span> </a>
<a href="#" class="menu_item"> <span class="left"></span> 标签 <span class="right"></span> </a>
<a href="#" class="menu_item"> <span class="left"></span> 小册子 <span
class="right"></span> </a>
</div>
</body>
</html>