小练习:简单三级菜单的制作(ul li)

思路:
列表嵌套列表,给一级菜单取名box,二级box2,三级box3, 一级菜单列表项li左浮动,默认初始状态二级和三级菜单都隐藏,鼠标滑过一级菜单列表项li,显示二级标签,划过二级菜单列表项li,显示三级菜单,三级菜单有定位问题,可以相对于二级菜单的li定位(使用“子元素绝对定位,父元素相对定位”),也可以相对于整个二级菜单.box2进行定位。
小练习:简单三级菜单的制作(ul li)_第1张图片


<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="#">60kga>li>
                        <li><a href="#">180cma>li>
                    ul>
                li>
                <li>
                    <a href="#">蔡徐坤a>
                    <ul class="box3">
                        <li><a href="#">a>li>
                        <li><a href="#">25岁a>li>
                        <li><a href="#">60kga>li>
                        <li><a href="#">180cma>li>
                    ul>
                li>
                <li>
                    <a href="#">徐峥a>
                    <ul class="box3">
                        <li><a href="#">a>li>
                        <li><a href="#">25岁a>li>
                        <li><a href="#">60kga>li>
                        <li><a href="#">180cma>li>
                    ul>
                li>
            ul>
        li>
        <li>
            <a href="#">女偶像a>
            <ul class="box2">
                <li>
                    <a href="#">高圆圆a>
                   <ul class="box3">
                        <li><a href="#">a>li>
                        <li><a href="#">25a>li>
                        <li><a href="#">100ga>li>
                        <li><a href="#">165cma>li>
                    ul>
                li>
                <li>
                    <a href="#">唐嫣a>
                    <ul class="box3">
                        <li><a href="#">a>li>
                        <li><a href="#">25a>li>
                        <li><a href="#">100ga>li>
                        <li><a href="#">165cma>li>
                    ul>
                li>
                <li>
                    <a href="#">杨幂a>
                    <ul class="box3">
                        <li><a href="#">a>li>
                        <li><a href="#">25a>li>
                        <li><a href="#">100ga>li>
                        <li><a href="#">165cma>li>
                    ul>
                li>
            ul>
        li>
        <li>
            <a href="#">童星a>
            <ul class="box2">
                <li>
                    <a href="#">杨紫a>
                    <ul class="box3">
                        <li><a href="#">a>li>
                        <li><a href="#">a>li>
                        <li><a href="#">a>li>
                        <li><a href="#">a>li>
                    ul>
                li>
                <li>
                    <a href="#">张一山a>
                    <ul class="box3">
                        <li><a href="#">a>li>
                        <li><a href="#">a>li>
                        <li><a href="#">a>li>
                        <li><a href="#">a>li>
                    ul>
                li>
                <li>
                    <a href="#">夏雨a>
                    <ul class="box3">
                        <li><a href="#">a>li>
                        <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="box2">
                <li>
                    <a href="#">嘎子a>
                    <ul class="box3">
                        <li><a href="#">a>li>
                        <li><a href="#">a>li>
                        <li><a href="#">a>li>
                        <li><a href="#">a>li>
                    ul>
                li>
                <li>
                    <a href="#">蔡徐坤a>
                            <ul class="box3">
                        <li><a href="#">a>li>
                        <li><a href="#">a>li>
                        <li><a href="#">a>li>
                        <li><a href="#">a>li>
                    ul>
                li>
                <li>
                    <a href="#">徐峥a>
                    <ul class="box3">
                        <li><a href="#">a>li>
                        <li><a href="#">a>li>
                        <li><a href="#">a>li>
                        <li><a href="#">a>li>
                    ul>
                li>
            ul>
        li>
    ul>
body>
html>

你可能感兴趣的:(html+css)