下拉菜单的实现

最新推荐文章于 2022-08-11 20:11:04 发布

我就呵呵了。。。

最新推荐文章于 2022-08-11 20:11:04 发布

阅读量289

点赞数

文章标签： html css 下拉菜单

本文链接：https://blog.csdn.net/qq_37244548/article/details/106127739

版权

本文详细介绍了如何使用HTML和CSS创建下拉菜单。首先在一级菜单中添加包含多个子项的二级菜单，然后设置二级菜单的宽度、背景色并使其默认隐藏。接着为菜单项设置边框、高度和文字样式。通过CSS hover伪类实现点击父级菜单时显示子级菜单的效果。最后提供完整的代码实现。

摘要由CSDN通过智能技术生成

目标：

步骤：

1，在一级菜单的第一个li标签里面添加一个ul>li*9>a[href="#"]>{子级导航$}

<li><a href="#">导航1</a>
				<ul class="list-nav">
					<li><a href="#">子菜单1</a></li>
					<li><a href="#">子菜单2</a></li>
					<li><a href="#">子菜单3</a></li>
					<li><a href="#">子菜单4</a></li>
					<li><a href="#">子菜单5</a></li>
					<li><a href="#">子菜单6</a></li>
					<li><a href="#">子菜单7</a></li>
					<li><a href="#">子菜单8</a></li>
					<li><a href="#">子菜单9</a></li>
				</ul>

2，给二级菜单添加宽和背景颜色，并且显示不可见，不要设置高，让它子级撑开

.list-nav{
				width: 144px;
				border: 1px solid red;
				background-color: #2A3C5C;
				display: none;
				margin-top: -2px;
			}

3，给li标签设置边线和高，以及文字的高(线高)，字体的大小

.list-nav>li{
				border-bottom: 1px solid white ;
				height: 40px;
				/* 文字的行高 */
			line-height: 40px;
			}
			.list-nav>li>a{
				font-size: 18px;
			}

4，实现点击父级hover，子级显示

/* 实现父级hover 子级是否显示问题 */
			.top-nav>ul>li:hover>ul{
				display: block;
			}

5，综合代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航栏</title>
		<style type="text/css">
				
			*{
				/* 通用标签 */
				margin: 0;
				padding: 0;
			}
			a{
				/* 通用标签 */
				color: white;
				text-decoration: none;
			}
			nav.top-nav a{
				font-size: 23px;
				font-weight: bold;
				
			}
			.top-nav{
				/* width不要超过1366px */
				width: 1300px;
				/* 居中 */
				margin:auto;
				/* border: 1px solid red; */
				height: 66px;
				background-color:#2A3C5C;
				background-image:url(img/666.png) ;
			}
			a:hover{
				text-decoration: underline;
				color: #FF0000;
			}
			.top-nav>ul{
				width: 1300px;
				height: 66px;
			 	border: 1px solid red; 
			}
			.top-nav>ul>li{
				width: 144px;
				cursor: pointer;
				height: 66px;
				/* margin-top:16px ; */
				/* 文字居中 */
				text-align: center;
				/* border: 1px solid red; */
				/* display: inline-block; */
				/* float最开始是用来决定文字和图片的环绕关系的，现在也可以用来块元素的横向排列 */
				float: left;
				line-height: 66px;
				
			}
			.top-nav>ul>li:hover{
				background: darkred;
			}
			/* 实现父级hover 子级是否显示问题 */
			.top-nav>ul>li:hover>ul{
				display: block;
			}
			/* nth-child(2n-1)可以接受表达式表示奇数 */
			/* 也能接受odd，even两个单词 */
			.top-nav>ul>li:nth-child(3),.top-nav>ul>li:nth-child(6){
				border-right: 1px solid white;
			}
			.list-nav{
				width: 144px;
				border: 1px solid red;
				background-color: #2A3C5C;
				display: none;
				margin-top: -2px;
			}
			.list-nav>li{
				border-bottom: 1px solid white ;
				height: 40px;
				/* 文字的行高 */
			line-height: 40px;
			}
			.list-nav>li>a{
				font-size: 18px;
			}
			/* 通用标签 */
			ul,ol{
				list-style: none;
			}
		</style>
	</head>
	<body>
		<nav class="top-nav">
			<!-- 语义化标签本身就是div -->
			<ul>
				<li><a href="#">导航1</a>
				<ul class="list-nav">
					<li><a href="#">子菜单1</a></li>
					<li><a href="#">子菜单2</a></li>
					<li><a href="#">子菜单3</a></li>
					<li><a href="#">子菜单4</a></li>
					<li><a href="#">子菜单5</a></li>
					<li><a href="#">子菜单6</a></li>
					<li><a href="#">子菜单7</a></li>
					<li><a href="#">子菜单8</a></li>
					<li><a href="#">子菜单9</a></li>
				</ul>
				
				</li>
				<li><a href="#">导航2</a></li>
				<li><a href="#">导航3</a></li>
				<li><a href="#">导航4</a></li>
				<li><a href="#">导航5</a></li>
				<li><a href="#">导航6</a></li>
				<li><a href="#">导航7</a></li>
				<li><a href="#">导航8</a></li>
				<li><a href="#">导航9</a></li>
			</ul>
		</nav>
	</body>
</html>