700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > HTML基础6折叠菜单手风琴菜单

HTML基础6折叠菜单手风琴菜单

时间:2022-12-07 06:49:14

相关推荐

HTML基础6折叠菜单手风琴菜单

页面主体部分:

<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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。