时间：2024-01-29 02:50:02 | 来源：网站运营
时间：2024-01-29 02:50:02 来源：网站运营
求如何制作HTML二级导航栏，本人刚学了鼠标划过，hover样式，老师让做二级导航栏，这有点为难 ？：效果图如下，只是写了下大致效果，细节的话题主自己调整吧
在线咨询
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>导航示例</title> <style> nav,ul,li,span,div { margin: 0; padding: 0; } ul, li { list-style: none; } nav { width: 1000px; background-color: midnightblue; margin: 150px auto; } .menu { display: flex; justify-content: space-around; color: #fff; } .menu-item { position: relative; padding: 20px; cursor: pointer; } .sub-menu { position: absolute; left: 0; top: 60px; width: 150px; background-color: midnightblue; padding: 10px 0; display: none; } .sub-menu-item { padding: 10px 20px; cursor: pointer; } .menu-item:hover > .sub-menu { display: block; } </style></head><body> <nav> <ul class="menu"> <li class="menu-item"> <span>商店</span> <ul class="sub-menu"> <li class="sub-menu-item">主页</li> <li class="sub-menu-item">探索队列</li> <li class="sub-menu-item">愿望单</li> </ul> </li> <li class="menu-item">社区</li> <li class="menu-item">关于</li> <li class="menu-item">客服</li> </ul> </nav></body></html>关键词：导航,样式,老师
