首页html中写一个三级导航菜单，要求菜单不折叠，要显示三级菜单的内容

html中写一个三级导航菜单，要求菜单不折叠，要显示三级菜单的内容

时间: 2024-09-21 07:04:36 浏览: 15

在HTML中创建一个不折叠的三级导航菜单，你可以使用`<ul>`、`<li>`以及嵌套的列表结构来实现。以下是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> ul { list-style-type: none; padding: 0; margin: 0; display: flex; flex-direction: column; /* 水平布局改为垂直 */ } li { margin-bottom: 5px; } ul ul { display: block; /* 展开三级菜单 */ padding-left: 20px; } </style> </head> <body> <nav class="navbar"> <ul> <li>一级菜单 - 主页</li> <li>一级菜单 - 分类一 <ul> <li>二级菜单 - 分类一-1</li> <li>二级菜单 - 分类一-2</li>  <li>二级菜单 - 分类一-（三级链接） <ul> <li>三级菜单 - 1.1</li> <li>三级菜单 - 1.2</li>  </ul> </li> </ul> </li>  </ul> </nav> </body> </html> ``` 在这个例子中，每个`<li>`元素代表一个菜单项，`<ul>`标签用于表示下拉菜单，当鼠标悬停在一级菜单上时，其对应的二级和三级菜单会自然展开。注意，CSS样式部分设置了`flex-direction: column`让菜单垂直排列，而`display: block`则是为了让三级菜单在点击后可见。