css下拉菜单源码

发表于前端技术学习版块 css,教程

下拉菜单是网页中常用的一种功能，可以使用户对网站的导航有更加方便的操作。而使用CSS实现下拉菜单是更加方便、简单的。下面是一个CSS下拉菜单的源码： <style> /*

下拉菜单是网页中常用的一种功能，可以使用户对网站的导航有更加方便的操作。而使用CSS实现下拉菜单是更加方便、简单的。下面是一个CSS下拉菜单的源码：

<style>
    /* 隐藏下拉菜单 */
    .sub-menu {
        display: none;
    }
    /* 让下拉菜单在鼠标悬停时出现 */
    .menu-item:hover .sub-menu {
        display: block;
    }
</style>
<ul class="menu">
    <li class="menu-item">
        <a href="#">菜单项1</a>
        <ul class="sub-menu">
            <li><a href="#">子菜单项1-1</a></li>
            <li><a href="#">子菜单项1-2</a></li>
            <li><a href="#">子菜单项1-3</a></li>
        </ul>
    </li>
    <li class="menu-item">
        <a href="#">菜单项2</a>
        <ul class="sub-menu">
            <li><a href="#">子菜单项2-1</a></li>
            <li><a href="#">子菜单项2-2</a></li>
            <li><a href="#">子菜单项2-3</a></li>
        </ul>
    </li>
    <li class="menu-item">
        <a href="#">菜单项3</a>
        <ul class="sub-menu">
            <li><a href="#">子菜单项3-1</a></li>
            <li><a href="#">子菜单项3-2</a></li>
            <li><a href="#">子菜单项3-3</a></li>
        </ul>
    </li>
</ul>

上述代码使用了<ul>和<li>等HTML标签创建了一个菜单，其中每个菜单项都有一个子菜单。通过CSS代码隐藏子菜单，并在鼠标悬停时显隐子菜单。
Codepen Demo: https://codepen.io/Ben_Sen/pen/LYyyZNr

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。