纯CSS控制实现4级横排下拉菜单
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>纯CSS控制实现4级横排下拉菜单</title><style type="text/css"><!--*{ margin:0; padding:0; border:0;}body{ font-family:"宋体"; line-height:16px; font-size:12px;}ul{ list-style:none;}.menubox{ width:750px; position:relative; margin:100px auto; line-height:25px;}.menubox a,.menubox a:hover{ text-decoration:none;}.menu1 a{ display:block; color:#000; width:120px; text-align:center;border:1px solid #ccc; line-height:25px; overflow:hidden;border:1px solid #fff; background:#ffffff;}.menu2 a{ display:block; color:#000; width:120px; text-align:center; border:1px solid #d3e9fd;background:#f4f9fd; line-height:25px; overflow:hidden;}.menu3 a{ display:block; color:#000; width:120px; text-align:center; border:1px solid #d3e9fd; background:#f4f9fd; line-height:25px; overflow:hidden;}.menu4 a{ display:block; color:#000; width:120px; text-align:center; border:1px solid #d3e9fd; background:#f4f9fd; line-height:25px; overflow:hidden;}.menubox ul li {float:left; margin-right:1px; position:relative; border-collapse:collapse;}.menu2,.menu3,.menu4{display:none;}.menu1 a:hover{ color:#095ca7; border-bottom:1px solid #ffffff; background:#ffffff;}.menu2 a:hover{ background:#d3e9fd; border:1px solid #bfddf8;}.menu3 a:hover{ background:#d3e9fd; border:1px solid #bfddf8;}.menu4 a:hover{ background:#d3e9fd; border:1px solid #bfddf8;}/* specific to non IE browsers */.menubox .menu1 li:hover .menu2{ width:120px; display:block; position:absolute;}.menubox .menu1 li:hover ul li:hover .menu3{ width:120px; display:block; position:absolute; left:-122px; top:0;}.menubox .menu1 li:hover ul li:hover ul li:hover .menu4{ width:120px; display:block; position:absolute; left:-122px; top:0;}--></style><!--><style type="text/css">.menubox .menu_hide{display:none;}.menubox .menu1 li a:hover .menu2{ width:120px; display:block; position:absolute; left:0;}.menubox .menu1 li a:hover ul li a:hover .menu3{ width:120px; display:block; position:absolute; left:-122px; top:0;}.menubox .menu1 li a:hover ul li a:hover ul li a:hover .menu4{ width:120px; display:block; position:absolute; left:-122px; top:0;}</style><!--></head><body><div class="menubox"> <ul class="menu1"> <li><a href="#" class="menu_hide"><img src="images/wx.gif"/><br/>无线类</a> <!--> <a href="#"><img src="images/wx.gif"/><br/>无线类 <table cellpadding="0" cellspacing="0" class="menutab"><tr><td> <!--> <ul class="menu2"> <li><a href="#"title="弱覆盖">弱覆盖</a></li> <li><a href="#"title="信息公告">信息公告</a></li> <li><a href="#"title="投诉收集与弱覆盖">投诉收集与弱覆盖</a></li> </ul> <!--> </td></tr></table> </a> <!--> </li> <li><a href="#"><img src="images/yhzhxx.gif"/><br/>用户综合信息</a></li> <li><a href="#"><img src="images/wap.gif"/><br/>WAP</a></li> <li><a href="#" class="menu_hide"><img src="images/xx.gif"/><br/>详单查询</a> <!--> <a href="#"><img src="images/xx.gif"/><br/>详单查询 <table cellpadding="0" cellspacing="0" class="menutab"><tr><td> <!--> <ul class="menu2"> <li><a href="#"title="彩信">彩信</a></li> <li><a href="#"title="短信">短信</a></li> <li><a href="#"title="集团短信">集团短信</a></li> <li><a href="#"title="梦网短信">梦网短信</a></li> <li><a href="#"title="互联短信">互联短信</a></li> <li><a href="#" title="10086">10086</a></li> </ul> <!--> </td></tr></table> </a> <!--> </li> <li><a href="#"><img src="images/tsxd.gif"/><br/>投诉向导</a></li> <li><a href="#" class="menu_hide"><img src="images/zhfw.gif"/><br/>整合功能服务</a> <!--> <a href="#"><img src="images/zhfw.gif"/><br/>整合功能服务 <table cellpadding="0" cellspacing="0" class="menutab"><tr><td> <!--> <ul class="menu2"> <li><a href="#" title="集团业务信息查询" class="menu_hide">集团业务信息查询</a> <!--> <a href="#">集团业务信息查询 <table cellpadding="0" cellspacing="0" class="menutab"><tr><td> <!--> <ul class="menu3"> <li><a href="#" title="家庭网" class="menu_hide">家庭网</a> <!--> <a href="#">家庭网 <table cellpadding="0" cellspacing="0" class="menutab"><tr><td> <!--> <ul class="menu4"> <li><a href="#" title="V网伴侣业务开通情况">V网伴侣业务开通情况</a></li> <li><a href="#" title="家庭网单个成员信息">家庭网单个成员信息</a></li> <li><a href="#" title="家庭网成员信息">家庭网成员信息</a></li> </ul> <!--> </td></tr></table> </a> <!--> </li> </ul> <!--> </td></tr></table> </a> <!--> </li> <li><a href="#"title="话音增值业务信息查询" class="menu_hide">话音增值业务信息</a> <!--> <a href="#">话音增值业务信息 <table cellpadding="0" cellspacing="0" class="menutab"><tr><td> <!--> <ul class="menu3"> <li><a href="#" title="语音信箱系统" class="menu_hide">语音信箱系统</a> <!--> <a href="#">语音信箱系统 <table cellpadding="0" cellspacing="0" class="menutab"><tr><td> <!--> <ul class="menu4"> <li><a href="#" title="用户数据查询">用户数据查询</a></li> <li><a href="#" title="语音信箱停用查询">语音信箱停用查询</a></li> <li><a href="#" title="改号通知信息查询">改号通知信息查询</a></li> <li><a href="#" title="语音信箱提醒短信查询">语音信箱提醒短信查询</a></li> <li><a href="#" title="全球传讯平台信息查询">全球传讯平台信息查询</a></li> </ul> <!--> </td></tr></table> </a> <!--> </li> <li><a href="#" title="康维漏话网管系统" class="menu_hide">康维漏话网管系统</a> <!--> <a href="#">康维漏话网管系统 <table cellpadding="0" cellspacing="0" class="menutab"><tr><td> <!--> <ul class="menu4"> <li><a href="#" title="用户数据查询">用户数据查询</a></li> <li><a href="#" title="漏话提醒短信查询">漏话提醒短信查询</a></li> </ul> <!--> </td></tr></table> </a> <!--> </li> <li><a href="#" title="彩铃管理平台" class="menu_hide">彩铃管理平台</a> <!--> <a href="#">彩铃管理平台 <table cellpadding="0" cellspacing="0" class="menutab"><tr><td> <!--> <ul class="menu4"> <li><a href="#" title="彩铃用户信息查询">彩铃用户信息查询</a></li> <li><a href="#" title="用户铃音库信息查询">用户铃音库信息查询</a></li> </ul> <!--> </td></tr></table> </a> <!--> </li> </ul> <!--> </td></tr></table> </a> <!--> </li> <li><a href="#" title="话音基本业务信息查询" class="menu_hide">话音基本业务信息</a> <!--> <a href="#">话音基本业务信息 <table cellpadding="0" cellspacing="0" class="menutab"><tr><td> <!--> <ul class="menu3"> <li><a href="#" title="局数据查询" class="menu_hide">局数据查询</a> <!--> <a href="#">局数据查询 <table cellpadding="0" cellspacing="0" class="menutab"><tr><td> <!--> <ul class="menu4"> <li><a href="#" title="彩信SP查询">彩信SP查询</a></li> <li><a href="#" title="WAP网关IP查询">WAP网关IP查询</a></li> <li><a href="#" title="彩信中心IP查询">彩信中心IP查询</a></li> </ul> <!--> </td></tr></table> </a> <!--> </li> </ul> <!--> </td></tr></table> </a> <!--> </li> <li><a href="#" title="数据业务信息查询" class="menu_hide">数据业务信息查询</a> <!--> <a href="#">数据业务信息查询 <table cellpadding="0" cellspacing="0" class="menutab"><tr><td> <!--> <ul class="menu3"> <li><a href="#" title="彩信用户信息管理系统" class="menu_hide">彩信用户信息管理系统</a> <!--> <a href="#">彩信用户信息管理系统 <table cellpadding="0" cellspacing="0" class="menutab"><tr><td> <!--> <ul class="menu4"> <li><a href="#" title="用户签约信息查询">用户签约信息查询</a></li> </ul> <!--> </td></tr></table> </a> <!--> </li> <li><a href="#" title="GPRS业务查询(只能查粤西或粤东)" class="menu_hide">GPRS业务查询(只能查粤西或粤东)</a> <!--> <a href="#">GPRS业务查询(只能查粤西或粤东) <table cellpadding="0" cellspacing="0" class="menutab"><tr><td> <!--> <ul class="menu4"> <li><a href="#" title="SGSN用户实时状态查询">SGSN用户实时状态查询</a></li> <li><a href="#" title="用户附着激活日志查询">用户附着激活日志查询</a></li> </ul> <!--> </td></tr></table> </a> <!--> </li> </ul> <!--> </td></tr></table> </a> <!--> </li> </ul> <!--> </td></tr></table> </a> <!--> </li> </ul></div></body></html>
页:
[1]