位置：广州松河 > 技术支持 > zblogPHP模板纯CSS实现多级子分类下拉菜单_CSS学习

zblogPHP模板纯CSS实现多级子分类下拉菜单_CSS学习

来源：网络整理时间：2023/3/4 0:56:45 共 3626 浏览

今天开始写zblog模板ydcms了，菜单用一个纯CSS的多级子分类下来菜单，包括各种触发:hover触发变背景色功能！

本文分享的HTML和CSS代码不限程序，使用的时候酌情修改其中的文字颜色背景颜色即可！

HTML代码：

<div class="container nav">
   <ul>
    <li class="current"><a href="#">首页</a></li>
    <li><a href="#">列表分类</a>
     <ul>
      <li><a href="#">列表子分菜单</a></li>
      <li><a href="#">列表子分菜单</a>
       <ul>
        <li><a href="#">孙子分类菜单1</a></li>
        <li><a href="#">孙子分类菜单2</a></li>
        <li><a href="#">孙子分类菜单3</a></li>
       </ul>
      </li>
      <li><a href="#">列表子分菜单</a></li>
     </ul>
    </li>
    <li><a href="#">生活日记</a></li>
    <li><a href="#">留言本</a></li>
   </ul>
  </div>

CSS代码：

/**/
.nav ul{list-style: none;}
.nav ul li{float: left;position: relative;}
.nav>ul>li.current a{background-color: #e84807;color: #fff;}
.nav ul li a{line-height: 45px; color: #555;display: inline-block;padding: 0 20px;transition: .1s;-webkit-transition: .1s;-ms-transition: .1s;-o-transition: .1s;}
.nav ul li a:hover{background-color: #0073c6; color: #FFF;}
/*二级*/
.nav ul ul{display: none;background-color: #eee;position: absolute;top: 100%;}
.nav ul li:hover>ul{display: block;}
.nav ul li:hover a{background-color: #0073c6; color: #fff;}
.nav ul ul li a{white-space: nowrap;}
.nav ul ul li a:hover{background-color: #e84807;}
/*三级*/
.nav ul ul li{position: relative;}
.nav ul ul ul{display: none; position: absolute;left: 100%;top: 0;}
.nav ul ul li:hover ul{display: block;}
.nav ul ul li:hover a{background-color: #e84807;}
.nav ul ul ul li:hover a{background-color: #0073c6;}

如果只是PC端实现下拉菜单功能，以上这段代码足够使用，移动端触屏包括IOS运用上存在问题，但移动端不会用这种下拉排版设计了！

下拉菜单相关：

《jQuery 鼠标触发下拉菜单》

《jQuery(最优)点击切换显示隐藏状态，点击显示隐藏菜单，.click切换》

《z-blogPHP实现子分类下拉、多级导航》

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：border:transparent透明边框_CSS学习 | ·下一条：CSS小技巧:border-style:?double制作三横线_CSS学习