html实现垂直折叠菜单,HTML6实现折叠菜单与手风琴菜单的实例代码

页面主体部分：

• 一级菜单1

  • 二级菜单1-1
  • 二级菜单1-2
  • 二级菜单1-3

• 一级菜单2

  • 二级菜单2-1
  • 二级菜单2-2
  • 二级菜单2-3

• 一级菜单3

  • 二级菜单3-1
  • 二级菜单3-2
  • 二级菜单3-3

• 一级菜单4

  • 二级菜单4-1
  • 二级菜单4-2
  • 二级菜单4-3

折叠菜单 例：

css部分

li{

list-style:none; 去掉列表前面图形

}

li a{

color:#123; 设置一级菜单文本颜色

}

#menu ul{

display:none; 设置二级菜单默认不显示

}

#menu>li:hover ul{

display:block; 鼠标滑过一级菜单时，显示二级菜单

}

手风琴菜单 例：

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;

}

总结

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

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！