鼠标悬停导航下拉菜单使用HTML和CSS

鼠标悬停导航下拉菜单是一种常见的网站设计，可以为用户提供更好的用户体验。以下是使用HTML和CSS实现鼠标悬停导航下拉菜单的方法：

使用HTML创建导航菜单：

<!DOCTYPE html>
<html>
<head><title>导航下拉菜单</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<nav>
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">产品</a>
				<ul>
					<li><a href="#">产品1</a></li>
					<li><a href="#">产品2</a></li>
					<li><a href="#">产品3</a></li>
				</ul>
			</li>
			<li><a href="#">新闻</a></li>
			<li><a href="#">关于我们</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
	</nav>
</body>
</html>

使用CSS实现鼠标悬停效果：

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: #333;
}

nav ul li {
	display: inline-block;
	position: relative;
}

nav ul li a {
	display: block;
	padding: 10px 20px;
	color: #fff;
	text-decoration: none;
}

nav ul li:hover > ul {
	display: block;
}

nav ul ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: #444;
}

nav ul ul li {
	display: block;
}

nav ul ul li a:hover {
	background-color: #555;
}

以上代码可以实现一个简单的鼠标悬停导航下拉菜单，你可以根据需要进行修改和扩展。