<!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>
jQuery之下拉菜单
最新推荐文章于 2022-02-14 21:57:47 发布