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

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