jQuery之下拉菜单

最新推荐文章于 2022-02-14 21:57:47 发布

gundumw100

最新推荐文章于 2022-02-14 21:57:47 发布

阅读量186

点赞数

分类专栏： jQuery HTML XHTML

本文链接：https://blog.csdn.net/gundumw100/article/details/69953142

版权

jQuery 同时被 3 个专栏收录

79 篇文章 0 订阅

订阅专栏

HTML

77 篇文章 0 订阅

订阅专栏

XHTML

21 篇文章 0 订阅

订阅专栏


<!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>

gundumw100

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery之下拉菜单

无标题文档$(function(){ $("li:has(ul)").hover(function(){ $(this).children().show(); },function(){ $(this).children().hide(); }); });html, body, div, span,iframe, h1, h2, h
复制链接

扫一扫

专栏目录