IT俱乐部 HTML HTML6实现折叠菜单与手风琴菜单的实例代码

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

页面主体部分:

  

折叠菜单 例:

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

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/html/13618.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部