是这样的效果吧？！这是具体的代码，用纯CSS写的，希望能帮助到你！<!doctypehtml><html><head><metacharset="utf-8"><title>底部菜单上弹且固定</title><style>*{margin:0;padding:0;}body{margin:0;padding:0;background:#f3f3f3;}#slcd{width:100%;height:60px;background:#09C;position:fixed;bottom:0px;}#slcdul,#slcdulli{height:60px;}#slcdulli{width:24.9%;float:left;list-style-type:none;line-height:60px;text-align:center;overflow:hidden;}#slcdulli:hover{background:#09F;overflow:visible;}#zcdul,#zcdulli{width:100%;height:60px;background:#09C;}.zcd1{margin-top:-240px;width:100%;}/*每个子菜单的上边距需要手动调整*/.zcd2{margin-top:-300px;width:100%;}.zcd3{margin-top:-300px;width:100%;}.zcd4{margin-top:-120px;width:100%;}</style></head><body><divid="slcd"> <ul> <li>菜单1 <divid="zcd"class="zcd1"> <ul> <li><ahref="#">菜单1子菜单1</a></li> <li><ahref="#">菜单1子菜单2</a></li> <li><ahref="#">菜单1子菜单3</a></li> </ul> </div> </li> <listyle="border-left:2pxsolid#CCC;border-right:2pxsolid#CCC;">菜单2 <divid="zcd"class="zcd2"> <ul> <li><ahref="#">菜单2子菜单1</a></li> <li><ahref="#">菜单2子菜单2</a></li> <li><ahref="#">菜单2子菜单3</a></li> <li><ahref="#">菜单2子菜单4</a></li> </ul> </div> </li> <listyle="border-right:2pxsolid#CCC;">菜单3 <divid="zcd"class="zcd3"> <ul> <li><ahref="#">菜单3子菜单1</a></li> <li><ahref="#">菜单3子菜单2</a></li> <li><ahref="#">菜单3子菜单3</a></li> <li><ahref="#">菜单3子菜单4</a></li> </ul> </div> </li> <li>菜单4 <divid="zcd"class="zcd4"> <ul> <li><ahref="#">菜单4子菜单1</a></li> </ul> </div> </li> </ul></div><divstyle="width:1080px;height:2000px;background:#c1c1c1;margin:0auto;font-size:200px;"><p>希望能帮助到你</p></div></body></html>
阅读全文 >
572
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
