小练习：简单三级菜单的制作（ul li）

最新推荐文章于 2024-04-22 10:37:13 发布

远方有只兔子~

最新推荐文章于 2024-04-22 10:37:13 发布

阅读量1.8k

点赞数 1

分类专栏： html+css

本文链接：https://blog.csdn.net/qq_43812504/article/details/110470714

版权

这篇博客介绍了一个简单的三级菜单制作方法。通过利用HTML的列表嵌套和CSS的浮动、隐藏及定位属性，实现了鼠标悬停时依次显示一级、二级、三级菜单的效果。在处理三级菜单的定位时，提到了两种方案：一是相对于二级菜单的li定位，二是相对于整个二级菜单定位。

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

思路：
列表嵌套列表，给一级菜单取名box,二级box2,三级box3, 一级菜单列表项li左浮动，默认初始状态二级和三级菜单都隐藏，鼠标滑过一级菜单列表项li,显示二级标签，划过二级菜单列表项li，显示三级菜单,三级菜单有定位问题，可以相对于二级菜单的li定位（使用“子元素绝对定位，父元素相对定位”），也可以相对于整个二级菜单.box2进行定位。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级菜单</title>
    <style>
        *{
    
            margin: 0px;
            padding: 0px;
        }
        ul,li{
    
            list-style: none;
        }
        a{
    
            text-decoration: none;
        }
/* ``````````````````````````````````````````*/
       

        .box{
    
            width: 408px;
            height: 400px;
            margin: 100px auto;
        }

        /* 只选中“儿子” 第二代选不到 */
        .box>li{
    
            float: left;
        }

        .box a{
    
            display: block;
            width: 100px;
            height: 40px;
            border: 1px solid #4f4f4f;
            background: #05555f;
            font-size: 14px;
            color: #ffffff;
            line-height: 40px;
            text-align: center;
        }

        .box a:hover{
    
            color: #b6df21;
        }

        .box2{
    
            /* 初始把二级标题隐藏 */
            display: none;
            /* 以整个二级标题作为参考，做为父元素来给三级标题定位*/
            /* position: relative; */
        }

        .box2>li{
    
            /* 以二级标题列表项为参考，做为父元素给三级标题定位 */
            position: relative;
        }

        .box2>li>a{
    
            background: #5f3434;
        }
        
        /* 鼠标滑过一级标题li ，二级标题显示 */
        .box>li:hover .box2{
    
            display: block;
        }

        .box3{
    
            /* 初始隐藏 */
            display: none;
            position: absolute;
            left: 102px;
            top: 0px;
        }

        /* 鼠标滑过二级标题li ，三级标题显示 */
        .box2>li:hover .box3{
    
            display: block;
        }

        .box3 a{
    
            background: #bd971a;
        }
        
    </style>
</head>
<body>
    <ul class="box">
        <li>
            <a href="#">男偶像</a>
            <ul class="box2">
                <li>
                    <a href="#">李易峰</a>
                    <ul class="box3">
                        <li><a href="#">20岁</a></li>
                        <li><a href="#">男</a></li>
                        <li><a href="#"

最低0.47元/天解锁文章

远方有只兔子~

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
4
评论
小练习：简单三级菜单的制作（ul li）

思路：列表嵌套列表，给一级菜单取名box,二级box2,三级box3, 一级菜单列表项li左浮动，默认初始状态二级和三级菜单都隐藏，鼠标滑过一级菜单列表项li,显示二级标签，划过二级菜单列表项li，显示三级菜单,三级菜单有定位问题，可以相对于二级菜单的li定位（使用“子元素绝对定位，父元素相对定位”），也可以相对于整个二级菜单.box2进行定位。<!DOCTYPE html><html lang="en"><head> <meta charset=
复制链接

扫一扫