二级导航和三级导航练习

最新推荐文章于 2023-07-24 18:57:47 发布

JohnKuo888

最新推荐文章于 2023-07-24 18:57:47 发布

阅读量348

点赞数

文章标签： css html 定位

本文链接：https://blog.csdn.net/u012197150/article/details/104487481

版权

本文提供两个二级和三级导航菜单的制作练习，关注在HTML和CSS中实现导航条的关键技巧和常见问题，代码示例详尽解析。

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

在这里插入图片描述

（逆战班）
在这里分享两个练习的二级和三级的导航条的制作，代码后面会附上。
重点要说明下需要注意的一些问题点：

1.需要注意二级以及三级导航的滑动之后display:block；的显示要设置给li，勿设置给a
2.设置样式尽量通过子选择器进行设置，否则样式上会发生问题
3.定位的设置，要看实现的效果，子元素要设置为自动适应父元素的宽度，在谁下面那么他的上一级就要给relative定位属性，给当前的给予absolute绝对定位定格在自己想显示的地方。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>二级导航练习</title>
		<style>
			*{
     margin: 0; padding: 0;}
			li{
     list-style: none;}
			a{
     text-decoration: none;}
			body{
    
				font-size: 14px;
				font-family: "微软雅黑";
			}
			/* 样式布局 */
			.one{
    
				position: relative;
				width: 404px;
				height: 40px;
				margin: 30px auto 0;
				background: #222222;
			}
			.one > li{
    
				float: left;
				width: 100px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				border-right: 1px solid #fff;
			}
			.one li a{
    
				display: block;
				color: #fff;
			}
			.one > li > a:hover{
    
				background: #ffa500;
			}
			.two{
    
				position: absolute;
				display: none;
				width: 100%;
				left: 0;
				top: 40px;
			}
			.two > li{
    
				float: left;
				width: 100px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				background: #ffa500;
			}
			.one > li:hover > ul{
    
				display: block;
			}
			.one > li:hover > a{
    
				background: #ffa500;
			}
		</style>
	</head>
	<body>
		<ul class="one">
			<li>
				<a href="">一级导航1</a>
				<ul class="two">
					<li>
						<a href="">二级导航1</a>
					</li>
					<li>
						<a href="">二级导航2</a>
					</li>
					<li>
						<a href="">二级导航3</a>
					</li>
					<li>
						<a href="">二级导航4</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="">一级导航2</a>
				<ul class="two">
					<li>
						<a href="">二级导航5</a>
					</li>
					<li>
						<a href="">二级导航6</a>
					</li>
					<li>
						<a href="">二级导航7</a>
					</li>
					<li>
						<a href="">二级导航8</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="">一级导航3</a>
				<ul class="two">
					<li>
						<a href="">二级导航9</a>
					</li>
					<li>
						<a href="">二级导航10</a