单纯使用CSS实现下拉菜单

最新推荐文章于 2024-05-16 14:22:32 发布

咖啡学编程

最新推荐文章于 2024-05-16 14:22:32 发布

阅读量3.1k

点赞数 2

分类专栏： css3 文章标签： css3 css javascript html html5

本文链接：https://blog.csdn.net/a727911438/article/details/52031897

版权

css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在你还没有学习javascript之前，想通过css方式来实现下拉菜单时，阅读本篇文章可能会给你提供一些思路。单纯用CSS而不需JS来实现下拉菜单其实很简单，在这里我只是简单将一下思路。

首先先上一段html结构代码：

<ul>
    <li>
        菜单一
        <ul>
            <li>选项一</li>
            <li>选项二</li>
            <li>选项三</li>
        </ul>
    </li>
    <li>
        菜单二
        <ul>
            <li>选项一</li>
            <li>选项二</li>
            <li>选项三</li>
        </ul>
    </li>
    <li>
        菜单三
        <ul>
            <li>选项一</li>
            <li>选项二</li>
            <li>选项三</li>
        </ul>
    </li>
</ul>

眼尖的你会发现，li标签下还包含着ul列表，没错，其中的ul列表就是下拉菜单。在写css之前，把class补充完整：

<ul class="nav">
	<li class="nav-menu">
		菜单一
		<ul class="nav-child">
			<li class="nav-child-item">选项一</li>
			<li class="nav-child-item">选项二</li>
			<li class="nav-child-item">选项三</li>
		</ul>
	</li>
	<li class="nav-menu">
		菜单二
		<ul class="nav-child">
			<li class="nav-child-item">选项一</li>
			<li class="nav-child-item">选项二</li>
			<li class="nav-child-item">选项三</li>
		</ul>
	</li>
	<li class="nav-menu">
		菜单三
		<ul class="nav-child">
			<li class="nav-child-item">选项一</li>
			<li class="nav-child-item">选项二</li>
			<li class="nav-child-item">选项三</li>
		</ul>
	</li>
</ul>

然后把导航、菜单的样式写好：

ul,li{
	margin:0;
	padding:0;
	list-style: none;
}
.nav{
	width:600px;
	margin:100px auto;
}
.nav .nav-menu{
	width:200px;
	float:left;
	background-color: blue;
	color:white;
	padding:10px 0;
	font-size: 20px;
	text-align: center;
	cursor: pointer;
}
.nav .nav-menu .nav-child{
	width:200px;
	display: none;
}
.nav .nav-menu .nav-child .nav-child-item{
	width:200px;
	display: block;
	padding:10px 0;
}
.nav .nav-menu .nav-child .nav-child-item:first-child{
	margin-top:10px;
}

以上样式请根据你的需求来进行修改。接下来最重要最重要的事情要做了，就是实现下拉的css代码，如下：

.nav .nav-menu:hover .nav-child{
	display: block;
}

是不是很神奇，你没有看错，就是一句话。请注意其中的:hover，这个是不是很熟悉，之前常用于a:hover来改变鼠标悬停效果，现在可用于用下拉菜单等等东西了。我简单解释一下，当鼠标悬停在类为nav-menu标签li上时，将nav-menu类下的nav-child有none变为block从而显示出来，是不是感觉很绕，其实只要你稍微用点心仔细看一下代码，就很容易理解了。

最后上完整代码（不确保能兼容所有浏览器，有兼容需求请使用js或jq实现下拉菜单）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style>
		ul,li{
			margin:0;
			padding:0;
			list-style: none;
		}
		.nav{
			width:600px;
			margin:100px auto;
		}
		.nav .nav-menu{
			width:200px;
			float:left;
			background-color: blue;
			color:white;
			padding:10px 0;
			font-size: 20px;
			text-align: center;
			cursor: pointer;
		}
		.nav .nav-menu .nav-child{
			width:200px;
			display: none;
		}
		.nav .nav-menu .nav-child .nav-child-item{
			width:200px;
			display: block;
			padding:10px 0;
		}
		.nav .nav-menu .nav-child .nav-child-item:first-child{
			margin-top:10px;
		}

		.nav .nav-menu:hover .nav-child{
			display: block;
		}
	</style>
</head>
<body>


	<ul class="nav">
		<li class="nav-menu">
			菜单一
			<ul class="nav-child">
				<li class="nav-child-item">选项一</li>
				<li class="nav-child-item">选项二</li>
				<li class="nav-child-item">选项三</li>
			</ul>
		</li>
		<li class="nav-menu">
			菜单二
			<ul class="nav-child">
				<li class="nav-child-item">选项一</li>
				<li class="nav-child-item">选项二</li>
				<li class="nav-child-item">选项三</li>
			</ul>
		</li>
		<li class="nav-menu">
			菜单三
			<ul class="nav-child">
				<li class="nav-child-item">选项一</li>
				<li class="nav-child-item">选项二</li>
				<li class="nav-child-item">选项三</li>
			</ul>
		</li>
	</ul>

</body>
</html>

由于我写好这篇博客的时候已经是凌晨3点，因为睡不着而起床写的这篇文章，所以脑子不是很清醒，表述的东西可能不清不楚令你感到困惑，在此抱歉，如果有问题请留言，我会详细解答。