首页html导航栏三级菜单

html导航栏三级菜单

时间: 2023-12-22 20:30:15 浏览: 50

以下是一个示例的HTML导航栏三级菜单的代码： ```html <!DOCTYPE html> <html> <head> <style> /* 样式可以根据需要进行自定义 */ .nav { list-style-type: none; margin: 0; padding: 0; } .nav li { position: relative; display: inline-block; background-color: #f4f4f4; padding: 10px; } .nav li:hover { background-color: #ccc; } .nav ul { display: none; position: absolute; left: 100%; top: 0; background-color: #f4f4f4; padding: 10px; } .nav li:hover > ul { display: block; } </style> </head> <body> <ul class="nav"> <li>一级菜单1 <ul> <li>二级菜单1 <ul> <li>三级菜单1</li> <li>三级菜单2</li> <li>三级菜单3</li> </ul> </li> <li>二级菜单2</li> <li>二级菜单3</li> </ul> </li> <li>一级菜单2</li> <li>一级菜单3</li> </ul> </body> </html> ``` 这段代码创建了一个简单的HTML导航栏三级菜单。当鼠标悬停在一级菜单上时，会显示出对应的二级菜单，再悬停在二级菜单上时，会显示出对应的三级菜单。