html5 css左侧多级菜单

基础概念

HTML5 是 HTML 的第五个版本，提供了更多的功能和元素来构建现代网页。CSS（层叠样式表）用于描述 HTML 文档的外观和格式。左侧多级菜单是一种常见的网页导航结构，允许用户通过展开和折叠不同的层级来访问网站的不同部分。

类型

垂直菜单：菜单项垂直排列在页面左侧。
水平菜单：菜单项水平排列在页面顶部。
下拉菜单：点击某个菜单项后，会展开一个子菜单。
侧边栏菜单：菜单项固定在页面一侧，通常用于较大的屏幕。

应用场景

大型网站：如电商网站、社交媒体平台等，需要复杂的导航结构。
企业网站：需要展示多个部门和产品线。
内容管理系统：需要灵活的导航结构来管理大量内容。

示例代码

以下是一个简单的 HTML5 和 CSS 实现的左侧多级菜单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-level Menu</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .menu {
            width: 200px;
            background-color: #f4f4f4;
            padding: 10px;
        }
        .menu ul {
            list-style-type: none;
            padding: 0;
        }
        .menu li {
            padding: 5px 0;
        }
        .menu li a {
            text-decoration: none;
            color: #333;
        }
        .sub-menu {
            display: none;
            padding-left: 20px;
        }
        .menu li:hover .sub-menu {
            display: block;
        }
    </style>
</head>
<body>
    <div class="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li>
                <a href="#">Services</a>
                <ul class="sub-menu">
                    <li><a href="#">Web Development</a></li>
                    <li><a href="#">Mobile Development</a></li>
                    <li>
                        <a href="#">AI & Machine Learning</a>
                        <ul class="sub-menu">
                            <li><a href="#">Deep Learning</a></li>
                            <li><a href="#">Natural Language Processing</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</body>
</html>

参考链接

常见问题及解决方法

菜单项不展开：
- 原因：可能是 CSS 样式设置不正确，导致子菜单无法显示。
- 解决方法：检查 .sub-menu 的 display 属性是否设置为 none，并且在父菜单项悬停时是否正确设置为 block。

菜单在不同屏幕尺寸下显示不正确：
- 原因：可能是没有使用响应式设计，导致菜单在小屏幕上显示不正常。
- 解决方法：使用媒体查询（Media Queries）来调整菜单在不同屏幕尺寸下的样式。
菜单项点击后没有响应：
- 原因：可能是链接（<a> 标签）的 href 属性设置不正确，或者 JavaScript 代码阻止了默认行为。
- 解决方法：检查 href 属性是否正确设置为目标 URL，或者检查是否有 JavaScript 代码影响了链接的点击事件。