css横向菜单
html页面：
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4
5 <script type="text/javascript" src="javsscript/jquery-1.7.1.js"></script>
6 <link type="text/css" href="css/menu.css" rel="Stylesheet" />
7 <script type="text/javascript" src="javsscript/menu.js"></script>
8 </head>
9 <body>
10 <ul>
11 <li class="mainmenu"><a href="#">主菜单一</a>
12 <ul>
13 <li><a href="#">一级菜单一</a></li>
14 <li><a href="#">一级菜单二</a></li>
15 </ul>
16 </li>
17 <li class="mainmenu"><a href="#">主菜单二</a>
18 <ul>
19 <li><a href="#">一级菜单一</a></li>
20 <li><a href="#">一级菜单二</a></li>
21 </ul>
22 </li>
23 <li class="mainmenu"><a href="#">主菜单三</a>
24 <ul>
25 <li><a href="#">一级菜单一</a></li>
26 <li><a href="#">一级菜单二</a></li>
27 </ul>
28 </li>
29 </ul>
30 </body>
31 </html>
menu.css文件：
View Code
1 ul, li
2 {
3 list-style: none;
4 margin: 0px;
5 padding: 0px;
6 text-align: center;
7 }
8 .mainmenu
9 {
10 float: left;
11 background-color: Orange;
12 color: White;
13 width: 100px;
14 }
15 .mainmenu ul
16 {
17 background-color: Gray;
18 color: Black;
19 display: none;
20 }
21
22 a
23 {
24 text-decoration: none;
25 display: block;
26 }
27 a:hover
28 {
29 background-color:Fuchsia;
30 }
menu.js文件：
View Code
$(document).ready(function() {
var t;//声明超时id
$(".mainmenu").hover(function() {
var li = $(this);
t = setTimeout(function() { //当鼠标移入时延时500毫秒执行里面的代码
li.children("ul").slideDown();
}, 500);
}, function() {
$(this).children("ul").slideUp();
clearTimeout(t); //清除延时id，及当鼠标移除时就不在执行setTimeout()方法里的代码。
});
});
