css实现子集导航栏

最新推荐文章于 2024-05-14 07:03:57 发布

xyhzczc

最新推荐文章于 2024-05-14 07:03:57 发布

阅读量176

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_44980168/article/details/125379522

版权

一、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            list-style: none;
            text-align: center;
        }
        a{
            text-decoration: none;


        }
        .li1{
            float: left;
        }
        .li1:hover{
            background-color: deepskyblue;
        }
        #ul1{
            margin-left: -40px;
        }
        #ul1 li{
            background-color: pink;
            border-bottom: 2px solid red;

        }
        #ul2 li{
            background-color: pink;
            width: 100px;
            border-right: 2px solid red;
        }
        #ul2 a:hover{
            color: red;
        }
        #ul1 li:hover{
            background-color: deepskyblue;
        }
        #ul2>li:hover{
            background-color: deepskyblue;
        }

        #ul1{
            display: none;
        }
        /*要显示的标签放在hover后面就可以*/
        #ul2 #id1:hover #ul1{
            display: block;
        }
        #ul2{
            margin-left: 20%;;
        }

    </style>
</head>

<body>

<ul id="ul2">
    <li class="li1" id="id1">
        <a href="#">斗罗大陆</a>
        <ul id="ul1">
            <li>
                <a href="#">比比东</a>
            </li>
            <li>
                <a href="#">胡列娜</a>
            </li>
            <li>
                <a href="#">千道流</a>
            </li>
        </ul>
    </li>
    <li class="li1">
        <a href="#">斗破苍穹</a>
    </li>
    <li class="li1">
        <a href="#">原神</a>
    </li>

</ul>
<br>
</body>
</html>