这可能是最简单的三级下拉菜单了

最新推荐文章于 2024-05-14 14:48:12 发布

本该如此

最新推荐文章于 2024-05-14 14:48:12 发布

阅读量729

点赞数

分类专栏：网站开发

本文链接：https://blog.csdn.net/qq_40922859/article/details/104879930

版权

这篇博客介绍了如何使用HTML5创建基础版、优化版和JS版的三级下拉菜单，适合初学者。通过理解菜单逻辑，可以实现鼠标悬停时显示子级菜单的功能。

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

QQ截图20200308170350.png

HTML5课上(xià)学到的下拉菜单，小白代码奉上ヾ(◍°∇°◍)ﾉﾞ。

基础版

首先要理解我们最终需要的效果是什么：

父级菜单 显示 的时候，子级菜单 隐藏
鼠标移动到含有子元素的 li 标签时，该标签显示其子元素(菜单)

代码如下（注意理解：核心CSS在 16~21 行）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
    list-style: none;}
        a{
    
            text-decoration: none;
            background: azure;
            border: 2px solid #2196F3;
        }
        /* 上面是无关的样式代码，略微修饰作用 */
        /* 下级菜单的ul是上级菜单ul li的子元素，子元素相对父元素定位，令父元素定位方式为relative，子元素为absolute */
        ul li{
    position: relative;width: 300px;}
        ul li ul{
    position: absolute;display: none;}     /*隐藏二级菜单*/
        /* 运用display：block&none 来进行层级显示*/
        ul li:hover ul{
    display:block;}            /*鼠标移动到一级菜单的li时显示二级菜单*/
        ul li:hover ul li ul{
    display: none;}       /*隐藏三级菜单*/
	ul li:hover ul li:hover ul{
    display:block;}  /*鼠标移动到二级菜单的li时显示三级菜单*/
        /*对于显示问题，这里就是运用display的none和block在其父子元素之间的交替使用。*/
        /*display:block作用是清除之前被display:none隐藏的效果，使元素重新显示出来。*/
    </style>
</head>
<body>
    <ul>
        <li><a href="#">一级菜单</a></li>
        <li><a href="#">一级菜单</a></li>
        <li><a href="#">一级菜单</a>
            <ul>
                <li><a href="#">二级菜单</a></li>
                <li><a