<!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>
- 3 回答
- 0 关注
- 1572 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消