首页 > 代码库 > html css 多级菜单实例
html css 多级菜单实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> ul { list-style: none; } a { text-decoration: none; } .fist_menu { text-align: center; } .fist_menu > li { float: left; width: 100px; height: 20px; border: 1px solid silver; background-color: Yellow; cursor: pointer; } .fist_menu > li > ul { margin: 0px; border: 1px solid white; display: none; } .fist_menu > li > ul > li { height: 20px; background-color: Gray; border: 1px solid white; } .fist_menu > li:hover > ul { display: block; } .thirdly_menu { margin-top: -20px; margin-left: 98px; display: none; width: 105px; } .thirdly_menu>li { background-color: Red; border: 1px solid white; } .fist_menu > li > ul > li:hover ul { display: block; } </style></head><body> <div> <ul class="fist_menu"> <li><a href="#">A</a> <ul> <li><a href="#">A1</a></li> <li><a href="#">A2</a></li> <li><a href="#">A3</a></li> </ul> </li> <li><a href="#">B</a> <ul> <li><a href="#">B1</a> <ul class="thirdly_menu"> <li><a href="#">B1_1</a></li> <li><a href="#">B1_2</a></li> <li><a href="#">B1_3</a></li> </ul> </li> <li><a href="#">B2</a> <ul class="thirdly_menu"> <li><a href="#">B2_1</a></li> <li><a href="#">B2_2</a></li> <li><a href="#">B2_3</a></li> </ul> </li> <li><a href="#">B3</a> <ul class="thirdly_menu"> <li><a href="#">B3_1</a></li> <li><a href="#">B3_2</a></li> <li><a href="#">B3_3</a></li> </ul> </li> </ul> </li> <li><a href="#">C</a> <ul> <li><a href="#">C1</a></li> <li><a href="#">C2</a></li> <li><a href="#">C3</a></li> </ul> </li> <li><a href="#">D</a> <ul> <li><a href="#">D1</a></li> <li><a href="#">D2</a></li> <li><a href="#">D3</a></li> </ul> </li> <li><a href="#">E</a> <ul> <li><a href="#">E1</a></li> <li><a href="#">E2</a></li> <li><a href="#">E3</a></li> </ul> </li> </ul> </div></body></html>
html css 多级菜单实例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。