php 来路ip，php 微信接口支付流程，phpcmsl漏洞，php 其它盘符文件，php md516位加密，短url生成 php，电影院系统论文php，php怎么数据保存到数据库，虚拟主机 php时间限制css a，淘宝css编写，CSS实现剪刀加载，css 相邻的兄弟元素，metinfo.css怎么用，css有冒号的垂直排列，css 样式切换
php 来路ip，php 微信接口支付流程，phpcmsl漏洞，php 其它盘符文件，php md516位加密，短url生成 php，电影院系统论文php，php怎么数据保存到数据库，虚拟主机 php时间限制css a，淘宝css编写，CSS实现剪刀加载，css 相邻的兄弟元素，metinfo.css怎么用，css有冒号的垂直排列，css 样式切换
今天开始写zblog模板ydcms了，菜单用一个纯CSS的多级子分类下来菜单，包括各种触发:hover触发变背景色功能！
本文分享的HTML和CSS代码不限程序，使用的时候酌情修改其中的文字颜色背景颜色即可！
HTML代码：
<divclass="containernav"> <ul> <liclass="current"><ahref="#">首页</a></li> <li><ahref="#">列表分类</a> <ul> <li><ahref="#">列表子分菜单</a></li> <li><ahref="#">列表子分菜单</a> <ul> <li><ahref="#">孙子分类菜单1</a></li> <li><ahref="#">孙子分类菜单2</a></li> <li><ahref="#">孙子分类菜单3</a></li> </ul> </li> <li><ahref="#">列表子分菜单</a></li> </ul> </li> <li><ahref="#">生活日记</a></li> <li><ahref="#">留言本</a></li> </ul> </div>
CSS代码：
/**/
.navul{list-style:none;}
.navulli{float:left;position:relative;}
.nav>ul>li.currenta{background-color:#e84807;color:#fff;}
.navullia{line-height:45px;color:#555;display:inline-block;padding:020px;transition:.1s;-webkit-transition:.1s;-ms-transition:.1s;-o-transition:.1s;}
.navullia:hover{background-color:#0073c6;color:#FFF;}
/*二级*/
.navulul{display:none;background-color:#eee;position:absolute;top:100%;}
.navulli:hover>ul{display:block;}
.navulli:hovera{background-color:#0073c6;color:#fff;}
.navulullia{white-space:nowrap;}
.navulullia:hover{background-color:#e84807;}
/*三级*/
.navululli{position:relative;}
.navululul{display:none;position:absolute;left:100%;top:0;}
.navululli:hoverul{display:block;}
.navululli:hovera{background-color:#e84807;}
.navulululli:hovera{background-color:#0073c6;}如果只是PC端实现下拉菜单功能，以上这段代码足够使用，移动端触屏包括IOS运用上存在问题，但移动端不会用这种下拉排版设计了！
下拉菜单相关：
《jQuery 鼠标触发下拉菜单》
《jQuery(最优)点击切换显示隐藏状态，点击显示隐藏菜单，.click切换》
《z-blogPHP实现子分类下拉、多级导航》