首页用html+css写一个侧边导航栏加二级菜单

用html+css写一个侧边导航栏加二级菜单

时间: 2023-10-29 19:07:04 浏览: 259

当然可以！以下是一个使用 HTML 和 CSS 创建侧边导栏和二级菜单的示例代码： ```html <!DOCTYPE html> <html> <head> <style> /* 侧边导航栏样式 */ .sidenav { width: 200px; background-color: #f1f1f1; height: 100%; position: fixed; left: 0; top: 0; } .sidenav a { padding: 8px 8px 8px 16px; text-decoration: none; font-size: 18px; color: #818181; display: block; } .sidenav a:hover { color: #f1f1f1; } /* 二级菜单样式 */ .dropdown-content { display: none; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <div class="sidenav"> <a href="#">首页</a> <a href="#">文章</a> <div class="dropdown"> <a href="#">关于</a> <div class="dropdown-content"> <a href="#">公司</a> <a href="#">团队</a> <a href="#">联系我们</a> </div> </div> <a href="#">联系</a> </div> </body> </html> ``` 你可以将上述代码复制到一个 HTML 文件中，并在浏览器中打开查看效果。这是一个简单的侧边导航栏，其中“关于”菜单有一个二级菜单。你可以根据需要进行样式调整和功能扩展。

阅读全文