您现在的位置是：网站首页> 编程资料编程资料

一款纯css3实现的竖形二级导航的实例教程纯CSS+XHTML实现的二级导航菜单效果纯CSS实现超简单的二级下拉导航菜单代码实列教程 一款基于jquery和css3的响应式二级导航菜单一款纯css实现的漂亮导航菜单(也适用于个人中心)简单的二级菜单导航实现css代码CSS3 二级导航菜单的制作的示例

2021-09-05 989人已围观

简介 这篇文章主要为大家介绍了一款纯css3实现的竖形二级导航的实例教程，这款导航菜单特色是可以是无限级。下面有代码，不会的朋友可以过来借鉴学习哦

　　之前为大家分享了好多导航菜单。今天给大家带来一款纯css3实现的竖形二级导航。这款导航菜单可以是无限级。一起看下效果图：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <div style="width: 700px; margin: auto;">  
  2.         <div class="W1-h16">  
  3.             <ul>  
  4.                 <li class="has-sub"><a href="#">Menu 1a>  
  5.                     <ul>  
  6.                         <li class="has-sub"><a href="#">Submenu 1.1a>  
  7.                             <ul>  
  8.                                 <li><a href="#">Submenu 1.1.1a>li>  
  9.                                 <li class="has-sub"><a href="#">Submenu 1.1.2a>  
  10.                                     <ul>  
  11.                                         <li><a href="#">Submenu 1.1.2.1a>li>  
  12.                                         <li><a href="#">Submenu 1.1.2.2a>li>  
  13.                                     ul>  
  14.                                 li>  
  15.                             ul>  
  16.                         li>  
  17.                         <li><a href="#">Submenu 1.2a>li>  
  18.                     ul>  
  19.                 li>  
  20.                 <li class="has-sub"><a href="#">Menu 2a>  
  21.                     <ul>  
  22.                         <li><a href="#">Submenu 2.1a>li>  
  23.                         <li><a href="#">Submenu 2.2a>li>  
  24.                     ul>  
  25.                 li>  
  26.                 <li class="has-sub"><a href="#">Menu 3a>  
  27.                     <ul>  
  28.                         <li><a href="#">Submenu 3.1a>li>  
  29.                         <li><a href="#">Submenu 3.2a>li>  
  30.                     ul>  
  31.                 li>  
  32.             ul>  
  33.         div>  
  34.     div>  

　　css3代码：

CSS Code复制内容到剪贴板
  1. .W1-h16 {   
  2.   padding: 0;   
  3.   margin: 0;   
  4.   border: 0;   
  5.   line-height: 1;   
  6. }   
  7. .W1-h16 ul,   
  8. .W1-h16 ul li,   
  9. .W1-h16 ul ul

    上一篇：一款利用纯css3实现的win8加载动画的实例分析css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

    下一篇：padding ie 不兼容问题浅谈原生页面兼容IE9问题的解决方案新版chrome浏览器设置允许跨域的实现css hack之\9和\0就可能对hack IE11\IE9\IE8无效css区分ie8/ie9/ie10/ie11 chrome firefox的代码解决CSS浏览器兼容性问题的4种方案常见的浏览器兼容性问题(小结)border-radius IE8兼容处理的方法浅谈遇到的几个浏览器兼容性问题base64图片在各种浏览器的兼容性处理 对常见的css属性进行浏览器兼容性总结(推荐)

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网