纯css3实现的竖形二级导航的实例教程

2019-09-10 郑州网站建设  

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

纯css3实现的竖形二级导航的实例教程

  实现的代码。

  html代码:

XML/HTML Code复制内容到剪贴板

<div style="width: 700px; margin: auto;">  

        <div class="W1-h16">  

            <ul>  

                <li class="has-sub"><a href="#">Menu 1</a>  

                    <ul>  

                        <li class="has-sub"><a href="#">Submenu 1.1</a>  

                            <ul>  

                                <li><a href="#">Submenu 1.1.1</a></li>  

                                <li class="has-sub"><a href="#">Submenu 1.1.2</a>  

                                    <ul>  

                                        <li><a href="#">Submenu 1.1.2.1</a></li>  

                                        <li><a href="#">Submenu 1.1.2.2</a></li>  

                                    </ul>  

                                </li>  

                            </ul>  


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1903.html转载请标明出处,谢谢合作!
标签:
  • 菜单
  • ζ
  • 之前
  • 大家
  • CSS3
  • 分享
  • 导航