HTML+CSS实现下拉菜单的教程_F11 - 专业站长和开发者的学习网站

代码如下：

		<!doctype html>

		<html>

		<head>

		<meta charset="utf-8"/>

		<style>

		*{

		margin:0;

		padding:0;

		text-decoration:none;

		list-style:none;

		}

		body{

		text-align:center;

		}

		.header{

		display:inline-block;

		position:relative;

		background-color:#4CAF50;

		}

		.header:hover .downbtn{

		display:block;

		background-color: #f1f1f1;

		}

		.header:hover{

		background-color: #3e8e41;

		}

		.header span{

		padding:15px;

		line-height:61px;

		cursor:pointer;

		color: white;

		}

		.header .downbtn{

		display:none;

		position:absolute;

		background-color:#f9f9f9;

		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

		min-width: 160px;

		}

		.header .downbtn li{

		line-height:30px;

		text-align:left;

		padding-left:5px;

		}

		.header .downbtn a:hover{

		text-decoration:underline;

		color:#f00;

		}

		.header .downbtn a{

		display:block;

		color:black;

		width:100%; 

		}

		</style>

		</head>

		<body>

		<div class="header">

		<span>下拉列表</span> 

		<div class="downbtn">

		<ul>

		<li><a href="#">下拉列表01</a></li>

		<li><a href="#">下拉列表02</a></li>

		<li><a href="#">下拉列表03</a></li>

		<li><a href="#">下拉列表04</a></li>

		<li><a href="#">下拉列表05</a></li>

		</ul>

		</div>

		</div>

		</body>

		</html>

效果图如下：

需要注意的是：

下拉菜单需边的子菜单隐藏（使用display:none;将元素隐藏）
鼠标悬浮样式（div:hover）
父元素相对定位（position:relative;）
子元素绝对定位（position:absolute;）