纯css水平三级导航栏

最新推荐文章于 2021-06-07 13:42:47 发布
最新推荐文章于 2021-06-07 13:42:47 发布
阅读量430 收藏 2
点赞数
文章标签： css ulli
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39875553/article/details/77842593
版权
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯css水平三级导航</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
@charset "UTF-8";
.box{
margin: 0 auto;
padding: 0px;
font-family:微软雅黑;
position:relative;
float:left;}
.box a{
color:white;
    text-align:center;}
.box ul{
margin:0px;
padding:0px;
list-style:none;}
.box ul li{
width: 200px;
height:100px;
display: block;
background-color:#989e9c;}
.box ul li a:hover{
display:inline-block;
box-shadow: 0 0 18px #bec5c3;
}
.box ul li:hover ul{
display:block;}
.box ul li a{
font-size:19px;
width:200px;
height:100px;
line-height:100px;
display:block;
text-decoration:none;}
.box ul li ul{
display:none;
position:absolute;
top:0px;
left:200px;}
.box ul li ul li{
width: 200px;
height:100px;
padding:0px;
background-color:#c4c9c3;}
.box ul li ul li a:hover{
background-color:white;
color:#696969;}
.box ul li ul li ul li{
background:#FFFFFF;}
.box ul li ul li ul li:hover{
background:#AFEEEE;}
.box ul li ul li:hover ul{
visibility:visible;}
.box ul li ul li ul{
visibility:hidden;
position:absolute;
top:0px;
left:200px;}
.thirdh{background-color:#aab49c;}</style>
</head>
<body>
<!-- 编程导航 -->
<div class="box">
    <ul><li><a href="#">一级导航1</a>
            <ul><li><a href="#">二级导航1-1</a>
                    <ul><li><a href="#" class="thirdh">三级导航1_1_1</a></li>
                        <li><a href="#" class="thirdh">三级导航1_1_2</a></li>
                        <li><a href="#" class="thirdh">三级导航1_1_3</a></li>
                        <li><a href="#" class="thirdh">三级导航1_1_4</a></li>


                    </ul>
                </li>
                <li><a href="#">二级导航1-2</a>
                    <ul><li><a href="#" class="thirdh">三级导航1_2_1</a></li>
                        <li><a href="#" class="thirdh">三级导航1_2_2</a></li>
                        <li><a href="#" class="thirdh">三级导航1_2_3</a></li>
                        <li><a href="#" class="thirdh">三级导航1_2_4</a></li>
                        <li><a href="#" class="thirdh">三级导航1_2_5</a></li>
                    </ul>
                </li>
                <li><a href="#">二级导航1-3</a>
                    <ul><li><a href="#" class="thirdh">三级导航1_1_1</a></li>
                        <li><a href="#" class="thirdh">三级导航1_1_2</a></li>
                        <li><a href="#" class="thirdh">三级导航1_1_3</a></li>
                    </ul>
                </li>
                <li><a href="#">二级导航1-4</a>
                    <ul><li><a href="#" class="thirdh">三级导航1_4_1</a></li>
                        <li><a href="#" class="thirdh">三级导航1_4_2</a></li>
                        <li><a href="#" class="thirdh">三级导航1_4_3</a></li>
                        <li><a href="#" class="thirdh">三级导航1_4_4</a></li>
                    </ul> 
                </li>         
                <li><a href="#">二级导航1-5</a>
                    <ul><li><a href="#" class="thirdh">三级导航1_2_1</a></li>
                        <li><a href="#" class="thirdh">三级导航1_2_2</a></li>
                        <li><a href="#" class="thirdh">三级导航1_2_3</a></li>
                        <li><a href="#" class="thirdh">三级导航1_2_4</a></li>
                        <li><a href="#" class="thirdh">三级导航1_2_5</a></li>
                    </ul>
                </li>
            </ul>
        </li>
<!-- 第二个一级导航 -->
        <li><a href="#">一级导航2</a>
            <ul><li><a href="#">二级导航2-1</a>
                    <ul><li><a href="#" class="thirdh">三级导航2_1_1</a></li>
                        <li><a href="#" class="thirdh">三级导航2_1_2</a></li>
                        <li><a href="#" class="thirdh">三级导航2_1_3</a></li>
                        <li><a href="#" class="thirdh">三级导航2_1_4</a></li>


                    </ul>
                </li>
                <li><a href="#">二级导航2-2</a>
                    <ul><li><a href="#" class="thirdh">三级导航2_2_1</a></li>
                        <li><a href="#" class="thirdh">三级导航2_2_2</a></li>
                        <li><a href="#" class="thirdh">三级导航2_2_3</a></li>
                        <li><a href="#" class="thirdh">三级导航2_2_4</a></li>
                        <li><a href="#" class="thirdh">三级导航2_2_5</a></li>
                    </ul>
                </li>
                <li><a href="#">二级导航2-3</a>
                    <ul><li><a href="#" class="thirdh">三级导航2_2_1</a></li>
                        <li><a href="#" class="thirdh">三级导航2_2_2</a></li>
                        <li><a href="#" class="thirdh">三级导航2_2_3</a></li>
                    </ul>
                </li>
                <li><a href="#">二级导航2-4</a>
                    <ul><li><a href="#" class="thirdh">三级导航2_4_1</a></li>
                        <li><a href="#" class="thirdh">三级导航2_4_2</a></li>
                        <li><a href="#" class="thirdh">三级导航2_4_3</a></li>
                        <li><a href="#" class="thirdh">三级导航2_4_4</a></li>
                    </ul> 
                </li>         
                <li><a href="#">二级导航2-5</a>
                    <ul><li><a href="#" class="thirdh">三级导航2_2_1</a></li>
                        <li><a href="#" class="thirdh">三级导航2_2_2</a></li>
                        <li><a href="#" class="thirdh">三级导航2_2_3</a></li>
                        <li><a href="#" class="thirdh">三级导航2_2_4</a></li>
                        <li><a href="#" class="thirdh">三级导航2_2_5</a></li>
                    </ul>
                </li>
            </ul>
        </li>
<!-- 第三、四、五导航 -->
        <li><a href="#">一级导航3</a>
            <ul><li><a href="#">二级导航3-1</a>
                </li>
                <li><a href="#">二级导航3-2</a>
                </li>
                <li><a href="#">二级导航3-3</a>
                </li>
                <li><a href="#">二级导航3-4</a>
                </li>
            </ul>
        </li>
        <li><a href="#">一级导航4</a>
            <ul><li><a href="#">二级导航4-1</a>
                </li>
                <li><a href="#">二级导航4-2</a>
                </li>
                <li><a href="#">二级导航4-3</a>
                </li>
                <li><a href="#">二级导航4-4</a>
                </li>
            </ul>
        </li>
         <li><a href="#">一级导航5</a>
            <ul><li><a href="#">二级导航5-1</a>
                </li>
                <li><a href="#">二级导航5-2</a>
                </li>
                <li><a href="#">二级导航5-3</a>
                </li>
                <li><a href="#">二级导航5-4</a>
                </li>
                <li><a href="#">二级导航5-5</a>
                </li>
            </ul>
        </li>
    </ul>
</div>
<!-- 编程导航结束 --><script>
</script>
</body>
</html>
十里桃花131
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用css简单实现三级导航栏
m0_54102950的博客
03-02 863
用display属性配合伪类选择器:hover实现三级导航栏
纯CSS 实现 3级导航栏
qq_29469941的博客
09-14 767
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> /* X>Y 选择器是寻找 父元素为X的Y。必须是父元素,而不能比父元素等级高。不能是爷元素。所以就是与X元素挨着最近的那一层的Y元素 X Y 选择器是寻找 X内 所有的Y。不管多少层,只要有就选择上。
纯css实现的三级水平导航菜单
qq_45670012的博客
10-30 591
vscode练习使用开发纯css的三级水平导航菜单。先上图： 1、html5布局 1 <html> 2 3 <head> 4 <meta charset="UTF-8"> ...
纯CSS实现横向三级菜单导航栏
06-28
纯使用CSS技术实现三级联动导航菜单栏，有需要的盆友可以下载试试看，保证可以正常运营，查看三级联动的效果！
css3 三级菜单导航栏
俊刚的博客
10-15 1826
css3制作的三级菜单导航栏： 效果图： 这个是垂直菜单栏：  代码： CSS3 3级菜单 *{margin:0; padding:0; font-family:Verdana, Geneva, sans-serif; font-size:12px;} a{text-decoration:none;display:block;transition:transf
纯css实现水平下拉导航菜单
04-07
以上就是使用纯CSS实现一个具有三级下拉功能的导航菜单的基本步骤。当然，实际项目中可能还需要考虑更多的细节，如过渡效果、鼠标离开时的延迟隐藏、菜单项的悬停状态等。通过不断优化和调整，可以打造出符合项目...
纯css实现水平下拉导航菜单.zip
07-04
而“纯CSS实现水平下拉导航菜单”是一个专注于利用CSS（层叠样式表）技术来创建具有下拉功能的水平导航菜单的解决方案。这种菜单特别适用于那些希望避免使用JavaScript或者希望菜单在无脚本环境下仍能正常工作的...
layui实现三级导航菜单
10-16
总结来说，layui实现三级导航菜单的关键在于正确使用layui的CSS类和JS接口，以及理解layui的布局结构。通过组合使用`layui-nav`、`layui-nav-item`、`layui-nav-child`等类，配合JavaScript事件处理，可以创建出功能...
纯CSS3宽屏水平导航下拉菜单代码.zip
最新发布
09-23
5. **背景图片渐变（Background Gradients）**：可以使用CSS3创建线性或径向渐变作为背景，为导航栏添加色彩层次感。 6. **盒阴影（Box Shadow）**：为导航菜单添加阴影效果，提升立体感和深度感。 7. **Flexbox...
Bootstrap左侧下拉三级菜单导航
11-19
在Bootstrap中，构建一个左侧下拉三级菜单导航是常见的需求，尤其对于那些具有复杂层级结构的网站。这种导航可以帮助用户轻松地浏览和访问网站的各个部分。 首先，让我们了解下Bootstrap菜单的基本构造。Bootstrap...
纯CSS实现的下拉导航三级菜单
12-30
纯CSS实现的下拉导航三级菜单，纯CSS实现的下拉导航三级菜单
纯CSS实现的三级导航菜单效果代码
09-24
主要为大家介绍了纯CSS实现的三级导航菜单效果代码,通过css控制页面元素样式实现三级导航菜单效果,非常简单实用,需要的朋友可以参考下
非常漂亮的三级联动菜单
03-03
漂亮的三级联动菜单 漂亮的三级联动菜单 漂亮的三级联动菜单
漂亮三级菜单 导航菜单 菜单
04-23
漂亮三级菜单 导航菜单 菜单 js tree 好用
div+css 纵向三级导航菜单 html代码
10-17
div+css 纵向三级导航菜单 html代码
纯div+css水平三级导航菜单
打杂人
01-12 2541
纯div+css水平三级导航菜单_懒人建站 http://www.51xuediannao.com /* common styling */ .menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0;
HTML+CSS 三级导航栏
djuntu9730的博客
12-23 532
一、代码部分： 1、CSS部分： <style type="text/css"> *{margin:0px;padding: 0px;} #daohang{background:#00BFFF;height: 40px;} #shouye{background: #1E90FF;margin-left: 0px} #daohang ul{height: 100%;}...
js/css导航条三级
Null_Bugs的博客
09-27 365
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>三级导航菜单</title> </head> <style> *{ margin: 0; padding: 0; } body{ font-size: 1...
html css三级导航,纯css水平三级导航
weixin_36308848的博客
06-07 217
@charset "UTF-8";.box{margin: 0 auto;padding: 0px;font-family:微软雅黑;position:relative;float:left;}.box a{color:white;text-align:center;}.box ul{margin:0px;padding:0px;list-style:none;}.box ul li{width:...
html+css三级导航栏展开式在内容区上方
04-04
你可以使用绝对定位来实现在内容区上方展开的三级导航栏。 首先，在 HTML 中创建一个包含三个导航级别的结构，如下所示： ```html <nav> <ul> <li><a href="#">Level 1</a> <ul> <li><a href="#">Level 2</a> <ul> <li><a href="#">Level 3</a></li> </ul> </li> </ul> </li> </ul> </nav> ``` 接下来，在 CSS 中设置导航栏的样式和位置： ```css nav { position: relative; z-index: 1; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { position: relative; display: inline-block; } nav a { display: block; padding: 10px 20px; background-color: #333; color: #fff; text-decoration: none; } nav ul ul { position: absolute; top: 100%; left: 0; width: 200px; background-color: #555; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } nav ul ul ul { top: 0; left: 100%; width: 200px; } nav li:hover > ul { opacity: 1; visibility: visible; } nav ul ul li { display: block; position: relative; } nav ul ul a { padding: 10px 25px; } nav ul ul ul a { padding: 10px 30px; } nav ul ul ul:hover > ul { opacity: 1; visibility: visible; } ``` 以上 CSS 代码会将所有导航栏项水平排列，并在鼠标悬停时展开子菜单。 最后，在内容区域上方创建一个 div 元素，并将其定位在导航栏下方： ```html <div class="content"> <!-- 内容区域 --> </div> ``` ```css .content { position: relative; top: -50px; /* 导航栏的高度 */ } ``` 这会将内容区域向上移动，使其位于导航栏下方。 完整的 HTML 和 CSS 代码如下所示： ```html <nav> <ul> <li><a href="#">Level 1</a> <ul> <li><a href="#">Level 2</a> <ul> <li><a href="#">Level 3</a></li> </ul> </li> </ul> </li> </ul> </nav> <div class="content"> <!-- 内容区域 --> </div> ``` ```css nav { position: relative; z-index: 1; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { position: relative; display: inline-block; } nav a { display: block; padding: 10px 20px; background-color: #333; color: #fff; text-decoration: none; } nav ul ul { position: absolute; top: 100%; left: 0; width: 200px; background-color: #555; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } nav ul ul ul { top: 0; left: 100%; width: 200px; } nav li:hover > ul { opacity: 1; visibility: visible; } nav ul ul li { display: block; position: relative; } nav ul ul a { padding: 10px 25px; } nav ul ul ul a { padding: 10px 30px; } nav ul ul ul:hover > ul { opacity: 1; visibility: visible; } .content { position: relative; top: -50px; /* 导航栏的高度 */ } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值