实现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 代码

  

    
首页
      

        
子菜单1

        
子菜单2
          

            
子子菜单1

            
子子菜单2
              

                
子子子菜单1

                
子子子菜单2

                
子子子菜单3

                
子子子菜单4

                
子子子菜单5

                
子子子菜单6

                
子子子菜单7

                
子子子菜单8

              

            

            
子子菜单3

            
子子菜单4

            
子子菜单5

            
子子菜单6

            
子子菜单7

            
子子菜单8

          

        

        
子菜单3

        
子菜单4

      

    

    
菜单2
      

        
子菜单1

        
子菜单2

        
子菜单3

      

    

    
菜单3
      

        
子菜单1

        
子菜单2

        
子菜单3

      

    

    
菜单4
      

        
子菜单1

        
子菜单2

        
子菜单3