二级标题 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>二级标题练习</title>
        <style type="text/css">
            .inner{
                display: none;
            }
            
            .outer > li:hover .inner{
                display: block;
            }
        </style>
    </head>
    <body>
        <ul class="outer">
            <li>
                <a href="#">文件</a>
                <ul class="inner">
                    <li><a href="#">文件夹</a></li>
                    <li><a href="#">文件名</a></li>
                    <li><a href="#">另存为</a></li>
                </ul>
            </li>
            <li>
                <a href="#">柜子</a>
                <ul class="inner">
                    <li><a href="#">文件夹</a></li>
                    <li><a href="#">文件名</a></li>
                    <li><a href="#">另存为</a></li>
                </ul>
            </li>
            <li>
                <a href="#">桌子</a>
                <ul class="inner">
                    <li><a href="#">文件夹</a></li>
                    <li><a href="#">文件名</a></li>
                    <li><a href="#">另存为</a></li>
                </ul>
            </li>
        </ul>
    </body>
</html>

 

posted @ 2022-05-09 16:21  氯丙嗪  阅读(18)  评论(0)    收藏  举报