CSS悬浮下拉菜单

这是前端时间课设时写的一个简单的下拉菜单,主要就是对CSS定位和选择器的使用,下面是实现代码:


CSS代码:

        .list-menu{
            display: flex;
            background: #f7f7f7;
            border-radius: 5px;
            padding: 10px 0;
            justify-content: space-around;
            color: #205D67;
            width: 80%;
        }

        .list-menu li{
            list-style: none;
        }

        .list-menu li:hover > ul{
            box-shadow: 0 0 10px #ccc;
            display: block;
        }

        .list-menu li ul{
            position: absolute;
            display: none;
            background: #fff;
            border:1px #f7f7f7 solid;
            border-radius: 5px;
            width: 10%;
            margin: 0;
            padding: 0;
            color:#205D67;
            font-size: 0.9rem;
        }

        .list-menu li ul a{
            text-decoration: none;
            color:#205D67;
        }

        .list-menu li ul a li{
            line-height: 30px;
            padding-left:10%;
            box-sizing: border-box;
            width: 100%;
        }

        .list-menu li ul a li:hover{
            background: #f7f7f7;
            cursor: pointer;
        }

HTML样例:

<ul class="list-menu">
    <li>按算法分类
        <ul>
            <a href="#"><li>分治</li></a>
            <a href="#"><li>贪心</li></a>
            <a href="#"><li>链表</li></a>
            <a href="#"><li>搜索</li></a>
            <a href="#"><li>字符串</li></a>
            <a href="#"><li>动态规划</li></a>
            <a href="#"><li>图论</li></a>
        </ul>
    </li>
    <li>按难易程度分类
        <ul>
            <a href="#"><li>简单</li></a>
            <a href="#"><li>中等</li></a>
            <a href="#"><li>很难</li></a>
            <a href="#"><li>超难</li></a>
        </ul>
    </li>
    <li>按数据结构分类
        <ul>
            <a href="#"><li>线性结构</li></a>
            <a href="#"><li>树结构</li></a>
        </ul>
    </li>
</ul>

运行截图:

这里写图片描述

这是一个最普通但是很常用的下拉菜单,如果想要更复杂的就需要结合JS和更复杂的CSS嵌套。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,924评论 25 708
  • 谁在天上安排?不知哪里主宰?叫声我佛如来何不生我肉体凡胎 七十二般变化不知道那张是我本来?我多想只有一个面孔认认真...
    边走边唱A阅读 476评论 2 8
  • 饺子形虽小,颗颗是真情。 滋味尚未知,有情饮水饱。 饺子形虽小,颗颗是真情。 唇齿相依间,心满意更浓。
    曼曼冰冰阅读 203评论 0 1
  • 对于任何人,无论何时何地,在缺乏充分证据的时候贸然相信都是不明智的。
    哎丫丫丫阅读 104评论 0 1