html+css简单下拉菜单制作

最新推荐文章于 2025-06-19 03:39:14 发布

纵马且长歌

最新推荐文章于 2025-06-19 03:39:14 发布

阅读量3.3w

点赞数 33

CC 4.0 BY-SA版权

分类专栏： Web

本文链接：https://blog.youkuaiyun.com/no2015214099/article/details/73196652

Web 专栏收录该内容

18 篇文章

订阅专栏

额，今天心血来潮做了个简单的下拉菜单，不过用的css操作的，啧！

最终效果：

代码：

<!DOCTYPE html>
<html>
<head>
	<title>DaoHang</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{margin:0px; padding: 0px; }
		#dh{
			position: relative;
			margin-top: 0px;
			width: 400px;
			height:40px;
			border: 0px;
			background-color: #0099CC;
		}
		#dh ul{
			padding: 0px;
			
		}
		a{
			color: #FFF;
			width: 100px;
			height: 40px;
			display: block;
			text-decoration: none;
			text-align: center;
			line-height: 40px;
			font-family: Microsoft Yahei;
			font-weight: 2px;
		}
		#dh {
			margin:0px auto; 
		}
		#dh ul li {
			list-style: none;
			float: left;
		}
		#dh ul li a:hover{
			background-color: #6699FF;
		}
		#dh ul:hover{
			display: block;
		}
		#dh ul li ul{
			background-color: #0099CC;
			position: absolute;
			display: none;
		}
		#dh ul li ul li{
			float: none;
			background-color: #6688EE;
			
		}
		#dh ul li ul li a{
			font-size: 13px;
			font-weight: 0px;
		}
		#dh ul li:hover ul{             /*二级菜单的触发点*/
			display: block;
		}
	</style>
</head>
<body>
	<div id="dh">
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">课程内容</a>
					<ul>
						<li><a href="#">Java</a></li>
						<li><a href="#">Javascript</a></li>
						<li><a href="#">HTML</a></li>
					</ul>
				</li>
			<li><a href="#">实验内容</a>
					<ul>
						<li><a href="#">Java试验1</a></li>
						<li><a href="#">Java试验2</a></li>
						<li><a href="#">Java试验3</a></li>
					</ul>
				</li>
			<li><a href="#">关于我们</a>
					<ul>
						<li><a href="#">网站历史</a></li>
						<li><a href="#">联系方式</a></li>
					</ul>
				</li>
		</ul>
	</div>
</body>
</html>