.navbar { position: relative; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding: 0 16px; height: 48px; background-color: #fafafa; border-bottom: 1px solid #e1e1e1; } .navbar__menu { display: flex; flex-flow: row nowrap; align-items: center; } .navbar__list { display: flex; flex-flow: row nowrap; align-items: center; } .navbar__item { margin-right: 16px; cursor: pointer; } .navbar__item:last-child { margin-right: 0; } .sub-menu { position: absolute; top: 100%; left: 0; display: none; background-color: #fff; border: 1px solid #e1e1e1; } .sub-menu__list { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; min-width: 160px; padding: 8px 0; margin: 0; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); } .sub-menu__item { padding: 8px 16px; cursor: pointer; } .sub-menu__item:hover { background-color: #f1f1f1; } .navbar__item:hover .sub-menu { display: block; }
在上面的代码中,.navbar
为导航栏所在的容器,.navbar__menu
为菜单容器,.navbar__list
为导航项目容器。当鼠标悬停在导航项目上时,会显示下拉菜单,下拉菜单的样式由.sub-menu
定义。
在使用CSS制作导航栏二级联动时,需要注意以下几点:
- 使用HTML语义化标签,例如
<nav>
和<ul>
等 - 使用CSS选择器准确地定位元素
- 为下拉菜单设置适当的样式,例如背景颜色、边框等
- 通过 JavaScript 控制下拉菜单的显示和隐藏
总之,CSS导航栏二级联动为用户提供了更加便捷和友好的操作方式,因此不论是网页设计还是Web开发场景下应用广泛。