HTML6实现折叠菜单与手风琴菜单的实例代码

页面主体部分：

body>
      ul id="menu">
              li>
                        a href="#">
    一级菜单1/a>
                     ul>
                            li>
    二级菜单1-1/li>
                            li>
    二级菜单1-2/li>
                            li>
    二级菜单1-3/li>
                     /ul>
                     /li>
              li>
                          a href="#">
    一级菜单2/a>
                      ul>
                            li>
    二级菜单2-1/li>
                            li>
    二级菜单2-2/li>
                            li>
    二级菜单2-3/li>
                      /ul>
                 /li>
              li>
                      a href="#">
    一级菜单3/a>
                      ul>
                            li>
    二级菜单3-1/li>
                            li>
    二级菜单3-2/li>
                            li>
    二级菜单3-3/li>
                      /ul>
               /li>
              li>
                      a href="#">
    一级菜单4/a>
                      ul>
                            li>
    二级菜单4-1/li>
                            li>
    二级菜单4-2/li>
                            li>
    二级菜单4-3/li>
                      /ul>
               /li>
      ul>
    /body>
    

折叠菜单 例：

css部分

head>
    style tyPE="text/css">
li{
        list-style:none;
  去掉列表前面图形}
li a{
        color:#123;
    设置一级菜单文本颜色}
#menu ul{
        display:none;
  设置二级菜单默认不显示}
    #menu>
li:hover ul{
        display:block;
       鼠标滑过一级菜单时，显示二级菜单}
    /style>
    /head>
    

手风琴菜单 例：

css部分

head>
    style type="text/css">
li{
        list-style:none;
  去掉列表前面图形}
li a{
        color:#123;
    设置一级菜单文本颜色}
    #menu>
    li,#menu>
    li>
    a,#menu>
    li>
ul{
        float:left;
             一级菜单，二级菜单左移动}
    #menu>
    li>
a{
        display:block;
        background-color;
    red;
    }
    #menu>
li:hover ul{
        display:block;
}
    #menu>
ul{
         dispaly:none;
         width:100px；     background-color:#123 ;
         padding-top:20px;
}
    /style>
    /head>
    

总结

以上所述是小编给大家介绍的HTML6实现折叠菜单与手风琴菜单的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！