作者：陌-天佑_807 | 来源：互联网 | 2024-12-24 22:57
创建一个响应式的多级导航菜单是前端开发中的常见任务。本文详细介绍如何使用CSS实现一个横向一级菜单和纵向子菜单的结构，确保在不同浏览器和屏幕尺寸下都能正常工作。
为了确保导航菜单在各种浏览器中表现一致且美观，使用 CSS 实现一个多层次的伸缩菜单是一个既简单又细致的任务。本文提供了一个完整的示例代码，方便开发者参考和复用。
此菜单设计为一级菜单横向排列，而其他子菜单则垂直显示。理论上，这种结构可以扩展到无限层级，只要屏幕足够大即可。
CSS 代码
* {
margin: 0;
padding: 0;
} /* 消除默认间距，确保子菜单对齐 */
.main {
margin: 0 auto;
width: 1024px;
} /* 导航栏水平居中 */
.nav {
height: 30px;
position: relative;
z-index: 100;
} /* 固定高度并防止被其他元素遮挡 */
.nav * {
height: 30px;
} /* 确保子菜单弹出时不干扰其他内容 */
.nav ul {
list-style: none;
} /* 取消列表样式 */
.nav > ul > li {
float: left;
width: 120px;
} /* 一级菜单横向排列，宽度可自适应但保留以防浏览器兼容问题 */
.nav > ul > li > ul > li {
position: relative;
top: -30px;
left: 120px;
} /* 子菜单定位在上级菜单项右侧 */
.nav li ul {
display: none;
} /* 默认隐藏子菜单 */
.nav li:hover > ul {
display: block;
} /* 鼠标悬停时显示子菜单 */
.nav a {
display: block;
width: 120px;
height: 30px;
line-height: 30px;
background: #c0c0c0;
} /* 确保链接占据整个菜单项并居中文本 */
.nav a:hover {
background: #ccc;
} /* 鼠标悬停时改变背景颜色 */
HTML 代码
京公网安备 11010802041100号