css实现子集导航栏

梦里梦外; 2023-09-29 16:30 14阅读 0赞

## 一、代码 ##

<!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>

## 二、预览效果 ##

![在这里插入图片描述][2c93e9b430a941769b98eb22171a2959.png]

[2c93e9b430a941769b98eb22171a2959.png]: https://img-blog.csdnimg.cn/2c93e9b430a941769b98eb22171a2959.png