CSS案例2：用定位是实现三级导航

最新推荐文章于 2021-03-04 08:34:45 发布
最新推荐文章于 2021-03-04 08:34:45 发布
阅读量369 收藏
点赞数 1
分类专栏： HTML 文章标签： 三级导航 定位案例 三级菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36722545/article/details/96895558
版权

效果图

在这里插入图片描述

主要用到了css定位技术，根据“子绝父相”的原则
position:relative;
position:absolute;

本代码中

  1. 一级导航的相对定位：.one >li{position:relative;}

  2. 二级导航相对于一级导航是绝对定位：

    .two{
    display: none;
    position: absolute;
    width: 100%;
    }

三级导航的时候：

  1. 二级导航应是相对定位：

    .two >li{
    height: 40px;
    width: 100px;
    background-color: #666;
    position: relative;
    }

.
2 三级导航应是绝对定位

.three{
			display: none;
			position: absolute;
			width: 100%;
			left: 100px;
			top: 0px;
		}

代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	

			*{
				margin:0;
				padding: 0;
			}
			li{
				list-style: none;
					text-align: center;
			}
			a{
				text-decoration:none; color: #fff;
				font-size: 14px;
			}
			.one{
				width: 1000px;
				height: 40px;
				background-color: #333;
				margin: 20px auto 0;
			}
			.one >li{
				float: left;
				width: 100px;
				line-height: 40px;
				border-left: 1px solid #eee;
				height: 40px;
				position: relative;
			}
			.two{
				display: none;
				position: absolute;
				width: 100%;
			}
			.two >li{
				height: 40px;
				width: 100px;
				background-color: #666;
				position: relative;
				}
			.one li a{
				display: block;/**/
			}
			.one>li:hover>ul{
				display: block;
			}
			.three{
				display: none;
				position: absolute;
				width: 100%;
				left: 100px;
				top: 0px;
			}
			.three li{
				background-color: red;
				height: 40px;
			}
			.two li:hover ul{
				display: block;
			}
	</style>
</head>
<body>
    <ul class="one">
    	<li>
    		<a href="#">一级菜单</a>
    		<ul class="two">
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    		</ul>
    	</li>
    	<li><a href="#">一级菜单</a>
    	<ul class="two">
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    		</ul></li>
    	<li><a href="#">一级菜单</a>
    	<ul class="two">
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    		</ul></li>
    	<li><a href="#">一级菜单</a>
    	<ul class="two">
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    		</ul></li>
    	<li>
    		<a href="#">一级菜单</a>
    	     <ul class="two">
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    		</ul>
    	 </li>
    	<li>
    		<a href="#">一级菜单</a>
    	      <ul class="two">
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    		</ul>
    	</li>
    </ul>
    
</body>
</html>
小佬呀
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现简单的三级导航
weixin_63477921的博客
07-06 7954
实现简单的三级导航
CSS三级导航
最新发布
m0_73559209的博客
08-12 141
【代码】CSS三级导航。
纯html+css做的侧边三级菜单导航
qwe123_asd的博客
09-20 2574
html部分 <ul> <li> <a href="#">章节</a> </li> <ul> <li> <a href="#">python</a> </li> ...
纯css实现三级菜单栏
热门推荐
h1580824951的专栏
04-17 1万+
之前已经介绍了如何使用纯css实现二级菜单栏，其实三级菜单栏就是在二级菜单栏的基础上实现的。 我们先做成这个样子： 可以看到，这里我们在“关于我们”——“我们的故事”下面添加了三级菜单，这个只需要在“我们的故事”这个li里面添加一个ul即可实现； 不过这里仍然存在着一个在二级菜单栏实现中已经提及的问题： 当我们把鼠标的光标从红框中的“故事3”位置移动到黄框所在位置时，红框中
三级导航
ZOEylchen的博客
09-27 5449
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/index/navheader.css"> </head> <body> <ul id="header"> <li><a>一级
纯CSS实现的三级导航菜单效果代码
09-24
主要为大家介绍了纯CSS实现的三级导航菜单效果代码,通过css控制页面元素样式实现三级导航菜单效果,非常简单实用,需要的朋友可以参考下
纯CSS实现网站三级菜单特效
04-07
纯CSS实现网站三级菜单特效是一款悬浮在左侧的CSS三级下拉菜单。
红色CSS3网站导航三级下拉菜单代码
06-05
这是一款红色风格的纯CSS3网站导航三级下拉菜单代码，利用css3 transition属性制作的鼠标悬停展开下拉菜单特效，支持二级、三级下拉菜单。
CSS导航条菜单之带小三角形的实现代码
09-22
主要介绍了CSS导航条菜单之带小三角形的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
纯css3实现的竖形无限级导航
09-25
本文给大家介绍了一款非常漂亮的纯CSS3打造的竖形无限级导航特效，小伙伴们需要的话直接拿走使用吧
html与css三级导航
02-06
html与css实现三级导航 html与css实现三级导航 html与css实现三级导航
js实现网页定位导航功能
11-26
本文实例为大家分享了js网页定位导航的具体代码，供大家参考，具体内容如下 一个循环判断当前滚动到的位置，另一个循环遍历导航条判断其id是否与滚动到的位置相同 效果如图： 实现代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>地狗购物网--网页定位导航效果</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ font-size: 12px;
案例14-三级菜单导航.rar
11-30
HTML三级导航条制作。
三级导航栏
weixin_54668937的博客
03-04 2244
三级导航 导航栏是一个页面必备的部分，主要用来引导人们去浏览相应的内容。下面我们来看一下导航栏里面的三级导航是如何制作的，首先我们来看一下HTML部分，如图： 然后我们来认识一下俩个css的属性1. Visibility属性可指定一个元素是否可见。2. Opacity属性可来设置一个元素的透明度。接下来我们要给类名为C的ul标签的Visibility属性设为hidden，也就是隐藏，Opacity属性设置为0。如图： 这样我们就可以把二级导航部分隐藏起来。然后给类名为B的li标签一个伪类，使其在鼠标移到
自动收缩的JS+CSS三级折叠导航菜单
wzjemb的专栏
04-15 4518
JS+CSS打造三级折叠菜单，自动收缩其它级 *,body,ul,h1,h2{ margin:0; padding:0; list-style:none;} body{font:12px "宋体"; padding-top:20px;} a{ color:#777;border:none;} #menu { width:200px; margin:auto;}  #menu h1 {
HTML5之横向二三级,纵向三级导航栏
我不是秃头的博客
10-18 5502
横向二级导航栏 HTML代码 <div id="nav"> <ul> <li><a href="#">学院首页</a></li> <li><a href="#">招生就业</a> <ul> <li><a href="#">招生信息</a></li> <li><a href="#
css3 三级菜单导航栏
俊刚的博客
10-15 1813
css3制作的三级菜单导航栏： 效果图： 这个是垂直菜单栏：  代码： CSS3 3级菜单 *{margin:0; padding:0; font-family:Verdana, Geneva, sans-serif; font-size:12px;} a{text-decoration:none;display:block;transition:transf
jq 遍历导航对象实现三级导航
Alice9969的博客
09-22 592
思路： 给每个层级加一个child属性，如果存在则是有下一个层级菜单。这样层级关系、修改很方便。 <!DOCTYPE html> <html> <head> <title>test</title> </head> <body> <div id="Nav"></div>...
css设置三级导航栏样式
05-26
可以使用CSS的伪类选择器`:hover`来设置三级导航栏的样式。以下是一个简单的例子： HTML代码： ``` <li><a href="#">一级导航1 <li><a href="#">二级导航1 <li><a href="#">三级导航1</a></li> <li><a ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值