第一步:HTML 结构
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 导航菜单容器 --> <div id="MyNav"> <!-- A 级别 --> <div> A <!-- A 级别的第一层列表 --> <ul> <!-- A 级别的第二层列表项 --> <li> A1 <!-- A1 级别的第三层列表 --> <ol> <li>aaaaaaa1</li> <li>aaaaaaa2</li> <li>aaaaaaa3</li> <li>aaaaaaa4</li> </ol> </li> <!-- A 级别的其他第二层列表项 --> <li> A2 <ol> <li>aaaaaaa2</li> </ol> </li> <!-- ... 重复类似的结构,处理 A3、A4、A5 ... --> </ul> </div> <!-- B 级别 --> <div> B <!-- B 级别的第一层列表 --> <ul> <!-- B 级别的第二层列表项 --> <li> B1 <!-- B1 级别的第三层列表 --> <ol> <li>aaaaaaa6</li> </ol> </li> <!-- ... 重复类似的结构,处理 B2、B3、B4、B5 ... --> </ul> </div> </div> </body>
在这一步,我们创建了一个基本的 HTML 结构。导航菜单被组织成 A 和 B 两个级别,每个级别包含了嵌套的无序列表(<ul>)和列表项(<li>),表示三级下拉菜单。
第二步:CSS 样式
<style> /* 使用 flex 布局使菜单项在一行内排列 */ #MyNav { display: flex; flex-wrap: wrap; } /* 每个级别容器的样式 */ #MyNav div { margin-right: 3rem; width: 300px; } /* 第二层列表(ul)的初始样式 */ #MyNav div ul { display: none; /* 初始时隐藏 */ background-color: #0004ff; /* 第二层列表的背景色 */ } /* 当鼠标悬停在父容器时显示第二层列表 */ #MyNav div:hover ul { display: block; } /* 第三层列表(ol)的初始样式 */ #MyNav div ol { display: none; /* 初始时隐藏 */ background-color: #00ffb7; /* 第三层列表的背景色 */ } /* 当鼠标悬停在第二层列表项上时显示第三层列表 */ #MyNav div ul li:hover ol { display: block; } </style>
在这一步,我们添加了 CSS 样式来创建三级嵌套下拉菜单的外观和行为:
#MyNav:菜单容器使用 flex 布局,以在一行内排列其子 <div> 元素。
#MyNav div:每个级别容器有指定的宽度和右边距,用于间距。
#MyNav div ul:第二层列表初始时是隐藏的(display: none),并且有一个背景色。
#MyNav div:hover ul:当鼠标悬停在 <div> 上时,其子 ul 将显示(display: block)。
#MyNav div ol:第三层列表初始时也是隐藏的,并且有另一种背景色。
#MyNav div ul li:hover ol:当鼠标悬停在 ul 的子 li 上时,其子 ol 将显示。
结论:
通过这些 HTML 和 CSS 片段,您创建了一个三级嵌套下拉菜单。该菜单以嵌套列表的形式组织,CSS 提供了样式和交互性,根据鼠标悬停动作显示和隐藏下拉级别。根据您的具体需求自定义内容和样式。