jQuery之下拉菜单

来源：互联网发布：阿里云动态ip 编辑：程序博客网时间：2024/06/08 01:22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script src="js/jquery-1.3.2.min.js" type="text/javascript"></script><script language="javascript">$(function(){$("li:has(ul)").hover(function(){$(this).children().show();},function(){$(this).children().hide();});});</script></head><style media="screen" type="text/css">html, body, div, span,iframe, h1, h2, h3, h4, h5, h6, p, a, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;vertical-align: baseline;background: transparent;    list-style:none;}html {overflow-y:scroll;border:0; background:#b2af9e;} body {text-align:center;width:1000px;    font: 12px/18px Tahoma, Helvetica, Arial, sans-serif;margin:auto;background:#fff;}a {text-decoration: none;text-decoration:none}a:hover {text-decoration:none}div{width:100%;height:20px;background-color:#e5edf6;}ul li {float:left;width:60px;height:20px;background-color:#0280C6;margin:0px;display:inline; color:#B6E4FD;}ul li:hover{background-color:#B6E4FD;color:#0280C6;}ul li ul{display:none;}ul li ul li{width:60px;height:20px;background-color:#B6E4FD;margin:0px;color:#0280C6;}ul li ul li:hover{background-color:#0280C6;color:#B6E4FD;}ul li ul li a {text-decoration: none;color:#0280C6;text-decoration:none;}ul li ul li a:hover {color: #B6E4FD;text-decoration:none;}</style><body><ul><li>aaa<ul><li><a href="#">aaa1</a></li><li><a href="#">aaa2</a></li><li><a href="#">aaa3</a></li><li><a href="#">aaa4</a></li></ul></li><li>bbb<ul><li><a href="#">bbb1</a></li><li><a href="#">bbb2</a></li><li><a href="#">bbb3</a></li><li><a href="#">bbb4</a></li></ul></li><li>ccc<ul><li><a href="#">ccc1</a></li><li><a href="#">ccc2</a></li><li><a href="#">ccc3</a></li><li><a href="#">ccc4</a></li></ul></li><li>ddd<ul><li><a href="#">ddd1</a></li><li><a href="#">ddd2</a></li><li><a href="#">ddd3</a></li><li><a href="#">ddd4</a></li></ul></li><li>eee<ul><li><a href="#">eee1</a></li><li><a href="#">eee2</a></li><li><a href="#">eee3</a></li><li><a href="#">eee4</a></li><li><a href="#">eee5</a></li></ul></li></ul></body></html>
0 0