首页完成一个纯css实现的多级下拉菜单效果如图所示

完成一个纯css实现的多级下拉菜单效果如图所示

时间: 2024-10-22 18:14:56 浏览: 24

要创建一个纯CSS实现的多级下拉菜单，可以利用CSS的定位、伪元素和一些基本的HTML结构。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> /* 定义基础样式 */ .nav { list-style-type: none; margin: 0; padding: 0; } .nav-item { display: inline-block; position: relative; } .nav-item > a { display: block; padding: 10px; text-decoration: none; color: black; } /* 首级下拉箭头 */ .nav-item > a::after { content: ""; position: absolute; top: calc(50% - 4px); right: 10px; width: 6px; height: 6px; border-width: 3px; border-style: solid; border-color: transparent transparent black transparent; } /* 当鼠标悬停在第一个下拉项上时显示下拉列表 */ .nav-item:hover > ul { display: none; /* 初始隐藏下拉列表 */ } .nav-item:hover > .submenu { display: block; /* 当鼠标悬停在父项时显示下拉列表 */ position: absolute; top: 100%; /* 下拉列表位置在父项下方 */ left: 0; background-color: #f9f9f9; min-width: 100%; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); } .submenu { display: none; list-style-type: none; position: absolute; z-index: 1; /* 确保下拉列表在其他内容之上 */ } .submenu li { display: block; } .submenu a { padding: 8px 16px; white-space: nowrap; } </style> </head> <body> <ul class="nav"> <li class="nav-item"> <a href="#">一级菜单 1</a> <ul class="submenu"> <li><a href="#">二级菜单 1</a></li> <li><a href="#">二级菜单 2</a></li> </ul> </li>  </ul> </body> </html> ``` 这个示例展示了如何通过CSS实现一个简单的两层下拉菜单。当鼠标悬停在一阶菜单项上时，对应的二级菜单会显示出来。

阅读全文