h5实现简单的二级菜单

最新推荐文章于 2024-08-25 19:34:22 发布

嘴巴嘟嘟邢道荣

最新推荐文章于 2024-08-25 19:34:22 发布

阅读量1.2k

点赞数 2

文章标签： html css 列表

本文链接：https://blog.csdn.net/m0_49085377/article/details/118378286

版权

本文介绍如何利用HTML的无序列表和CSS样式，实现鼠标悬停时显示二级菜单的效果。主要技术点包括：list-style设置、文本居中、top选择器的hover伪类及相对定位的应用。

摘要由CSDN通过智能技术生成

h5实现简单的二级菜单

效果图

在这里插入图片描述

需求：实现鼠标触碰一级菜单后显示二级菜单

技术点：无序列表和css样式的灵活使用

实现步骤

布局块代码如下：

<body>
    <div id="container">
        <ul>
            <li style="background: yellow;" class="top">
                <a>水果</a>
                <ul>
                    <li>苹果</li>
                    <li>梨子</li>
                    <li>香蕉</li>
                    <li>西瓜</li>
                </ul>
            </li> 
            <li style="background: blue;" class="</