纯CSS 实现 3级导航栏

最新推荐文章于 2022-03-02 17:14:38 发布

GOGOGOAAAA

最新推荐文章于 2022-03-02 17:14:38 发布

阅读量764

点赞数

分类专栏： h5 文章标签： css 导航栏三级导航栏纯CSS

本文链接：https://blog.csdn.net/qq_29469941/article/details/52534878

版权

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle>style> /* X>Y 选择器是寻找父元素为X的Y。必须是父元素,而不能比父元素等级高。不能是爷元素。所以就是与X元素挨着最近的那一层的Y元素 X Y 选择器是寻找 X内所有的Y。不管多少层,只要有就选择上。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
   /* X>Y 选择器是寻找 父元素为X的Y。必须是父元素,而不能比父元素等级高。不能是爷元素。所以就是与X元素挨着最近的那一层的Y元素
        X Y 选择器是寻找 X内 所有的Y。不管多少层,只要有就选择上。

        导航栏的原理 就是 一个ul 嵌套 另外一个ul,然后内部的ul设置display:none ,把他们隐藏起来。
        然后给ul内部的li:hover>ul设置一下 display:block。将其显示出来。也就是当鼠标悬停在li上的时候激活下一层的ul
        2级导航栏的ul 放在每一个li里,它激活出现的时候会默认出现在li下边,2级导航栏就出现了。
        3级导航栏在2级的li里再放一个ul,然而这个ul也会仍然出现在li的下边,所以需要给3级的ul一个 绝对定位。
        position:absolute。然后调整位置。  不过需要设置2层的li为position为releative,将这个作为绝对定位的 相对对象。

        */
    li{
        width: 100px;
        background-color: indianred;
        display: block;
        height: 2rem;
    }

    .ul1 ul{

最低0.47元/天解锁文章

GOGOGOAAAA

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
纯CSS 实现 3级导航栏

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle>style> /* X>Y 选择器是寻找父元素为X的Y。必须是父元素,而不能比父元素等级高。不能是爷元素。所以就是与X元素挨着最近的那一层的Y元素 X Y 选择器是寻找 X内所有的Y。不管多少层,只要有就选择上。
复制链接

扫一扫

专栏目录