<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.top-nav{
list-style: none;
font-size: 14px;
font-weight: bold;
}
.top-nav li{
float: left;
margin-right: 3px;
}
.top-nav li a{
text-decoration: none;
background-color: #EEEEEE;
color: #666666;
width: 90px;
text-align: center;
display: block;
line-height: 40px;
}
.top-nav ul{
display: none;
list-style: none;
padding: 0;
position: absolute;
}
.top-nav li a:hover{
background: url(img/ss1.png)0 0 repeat-x;
}
.top-nav li:hover ul{
width: 90px;
display: block;
padding: 0;
}
.top-nav li ul:hover li{
display: block;
}
.note{
background-color: #EEEEEE;
display: block;
background: url(img/ss1.png)0 0 repeat-x;
}
</style>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$(".top-nav li").mousemove(function(){
$(this).find("ul").stop("1000").slideDown("1000");
});
$(".top-nav li").mouseleave(function(){
$(this).find("ul").stop("1000").slideUp("slow");
});
});
</script>
</head>
<body>
<ul class="top-nav">
<li>
<a href=""><span class="note">首页</span></a>
</li>
<li>
<a href="">日志</a>
<ul>
<li>
<a href="">加油</a>
</li>
<li>
<a href="">努力</a>
</li>
<li>
<a href="">安静</a>
</li>
<li>
<a href="">速度</a>
</li>
</ul>
</li>
<li class="navmenu">
<a href="">相册</a>
<ul>
<li>
<a href="">加油</a>
</li>
<li>
<a href="">努力</a>
</li>
<li>
<a href="">安静</a>
</li>
<li>
<a href="">速度</a>
</li>
</ul>
</li>
<li class="navmenu">
<a href="">音乐盒</a>
<ul>
<li>
<a href="">十年</a>
</li>
<li>
<a href="">红玫瑰</a>
</li>
<li>
<a href="">淘汰</a>
</li>
<li>
<a href="">约定</a>
</li>
</ul>
</li>
<li>
<a href="">关于我们</a>
</li>
</ul>
</body>
</html>
慕数据5775487