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

  • Post author:
  • Post category:其他


页面主体部分:

折叠菜单 例:

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

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