2021-04-22

最新推荐文章于 2025-05-24 10:11:26 发布

nz__zn

最新推荐文章于 2025-05-24 10:11:26 发布

阅读量113

点赞数

分类专栏：前端HTML5 文章标签： html

本文链接：https://blog.youkuaiyun.com/weixin_53191752/article/details/116004942

版权

前端HTML5 专栏收录该内容

8 篇文章

订阅专栏

利用hover实现伸缩导航栏

在很多网站页面，我们会看到很多地方都用到了伸缩式的导航栏。使得界面更加美观，用户更加方便的找到自己喜欢的板块。那么这些是如何实现的呢？

下面呢是编者最近刚刚学到的一种方式，作为一名小白呢，希望大家共同学习，一起加油！

不多说直接上代码，如若有误还请大家多多包涵，进行指正！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>menu</title>
    <style type="text/css">
         *{
             padding: 0px;
             border: 0xp;
             margin: 0px;
         }
         .form1{
             border: 1px solid red;
             text-align: center;
         }
         #menu>li{
             margin: 0px auto;
             background-color: tan;
             margin-top: 20px;
             border:.5px solid turquoise;
             width: 200px;
             border-radius: 100%;
         }
         li{
             list-style: none;
             /* 取消所有列表的前面的小圆点 */
         }
         .boys{
             display: none;
             /* 实现将每个块下面的列表隐藏 */
             text-indent: 20px;
             /* 实现列表行首行缩进 */
         }
         #menu>li:hover .boys{
             display: block;
             /* 当鼠标移动到#menu下面的li标签上面时候显示隐藏的列表 */
         }
    </style>
</head>
<body>
<div class="form1">
    <ul id='menu'>
        <li><a href='#'>A班</a>
            <ul class='boys'>
                <li>高嘉朗</li>
                <li>陆思恒</li>
                <li>刘也</li>
                <li>丰楚轩</li>
                <li>高嘉朗</li>
                <li>陆思恒</li>
                <li>刘也</li>
                <li>丰楚轩</li>
            </ul>
        </li>
        <li><a href="#">B班</a>
            <ul class='boys'>
                <li>贺俊雄</li>
                <li>张颜齐</li>
                <li>高嘉朗</li>
                <li>陆思恒</li>
                <li>刘也</li>
                <li>丰楚轩</li>
            </ul>
        </li>
        <li><a href='#'>C班</a>
            <ul class='boys'>
                <li>俞彬</li>
                <li>高嘉朗</li>
                <li>陆思恒</li>
                <li>刘也</li>
                <li>丰楚轩</li>
                <li>四正</li>
            </ul>
        </li>
        <li><a href='#'>F班</a>
            <ul class='boys'>
                <li>姚琛</li>
                <li>高嘉朗</li>
                <li>陆思恒</li>
                <li>刘也</li>
                <li>丰楚轩</li><li>高嘉朗</li>
                <li>陆思恒</li>
                <li>刘也</li>
                <li>丰楚轩</li>
                <li>朱微之</li>
            </ul>
        </li>
    </ul>
</div>  
</body>
</html>

代码实现结果如下

在这里插入图片描述

当鼠标移动到文本时

在这里插入图片描述

参考这位小姐姐的

https://blog.youkuaiyun.com/weixin_44520259/article/details/90287426?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultBlogCommendFromBaidu~default-6.baidujs