DHTML(Dynamic HTML)--2使用ul 制作列表菜单

最新推荐文章于 2020-11-28 16:58:03 发布

程序小白_龙

最新推荐文章于 2020-11-28 16:58:03 发布

阅读量465

点赞数 1

分类专栏： ----JavaScript----------- DHTML 文章标签： DHTML 列表菜单 javascript ul

本文链接：https://blog.csdn.net/Dragon_Dai_2017/article/details/77759467

版权

----JavaScript----------- 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

DHTML

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>列表菜单</title>
		<style type="text/css">
			#newsid ul{
				list-style:none;
			}
 			#newslist li{		/*  id为newslist的列表(ul)的列表项(li)向左漂浮 (float:left) */
				float:left;
				width:180px;
			}
			#newslist li ul{
				margin:0px;
				padding:0px;
			}
			#newslist li ul li{
				line-height:25px;
			}
			#newslist li a{
				display:block;
				color:#ffffff;
				background-color:#0066cc;
				text-decoration:none;	/* 去除超链接的下划线  */
				line-height:25px;
				text-align:center;
			}
			#newslist li a:hover{
				color:#0066cc;
				background-color:#999999;
			}
			#newslist li ul a{
				color:#000000;
				background-color:#0099ff;
			}
			#newslist li ul li a:hover{
				color:#0066ff;
				background-color:#999999;
			}
			#newslist li ul{
				display:none;		/* display(none:列表项收起 block:列表项展开) */
			}
		</style>
		<script type="text/javascript">
			function list(liNode){
				var ulNode = liNode.getElementsByTagName("ul")[0];
				with(ulNode.style){		//设置display属性
					display = display=="block"?"none":"block";
				}
			}
		</script>
	</head>
	
	<body>
		<!--  制作一个下拉菜单：1)封装数据 2)定义基本样式    -->
		<div id="newsid">
			<ul id="newslist">
				<li οnmοuseοver="list(this);" οnmοuseοut="list(this);" >
					<a href="javascript:void(0)">城院新闻</a>
					<ul style="display:none;">		<!-- 这里是列表的嵌套  -->
						<li><a href="http://blog.csdn.net/dragon_dai_2017">校园新闻内容摘要</a></li>
						<li><a href="http://blog.csdn.net/dragon_dai_2017">校园新闻内容摘要</a></li>
						<li><a href="http://blog.csdn.net/dragon_dai_2017">校园新闻内容摘要</a></li>
						<li><a href="http://blog.csdn.net/dragon_dai_2017">校园新闻内容摘要</a></li>
					</ul>
				</li>
				<li οnmοuseοver="list(this);" οnmοuseοut="list(this);" >
					<a href="javascript:void(0)">大学新闻</a>
					<ul style="display:none;">
						<li><a href="http://blog.csdn.net/dragon_dai_2017">大学新闻内容摘要</a></li>
						<li><a href="http://blog.csdn.net/dragon_dai_2017">大学新闻内容摘要</a></li>
						<li><a href="http://blog.csdn.net/dragon_dai_2017">大学新闻内容摘要</a></li>
						<li><a href="http://blog.csdn.net/dragon_dai_2017">大学新闻内容摘要</a></li>
					</ul>
				</li>
				<li οnmοuseοver="list(this);" οnmοuseοut="list(this)" >
					<a href="javascript:void(0)">社会新闻</a>
					<ul style="display:none;">
						<li><a href="http://blog.csdn.net/dragon_dai_2017">社会新闻内容摘要</a></li>
						<li><a href="http://blog.csdn.net/dragon_dai_2017">社会新闻内容摘要</a></li>
						<li><a href="http://blog.csdn.net/dragon_dai_2017">社会新闻内容摘要</a></li>
						<li><a href="http://blog.csdn.net/dragon_dai_2017">社会新闻内容摘要</a></li>
					</ul>
				</li>
				<li οnmοuseοver="list(this);" οnmοuseοut="list(this);" >
					<a href="javascript:void(0)">就业新闻</a>
					<ul style="display:none;">
						<li><a href="http://blog.csdn.net/dragon_dai_2017">就业新闻内容摘要</a></li>
						<li><a href="http://blog.csdn.net/dragon_dai_2017">就业新闻内容摘要</a></li>
						<li><a href="http://blog.csdn.net/dragon_dai_2017">就业新闻内容摘要</a></li>
						<li><a href="http://blog.csdn.net/dragon_dai_2017">就业新闻内容摘要</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

程序小白_龙

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DHTML(Dynamic HTML)--2使用ul 制作列表菜单

列表菜单 #newsid ul{ list-style:none; } #newslist li{ /* id为newslist的列表(ul)的列表项(li)向左漂浮 (float:left) */ float:left; width:180px; } #newslist li ul{ margin:0px; pad
复制链接

扫一扫

专栏目录