关于纯css三级下拉菜单水平居中问题请各位老师指点 - ASP.NET技术论坛

问题点数：0 回复次数：0

关于纯css三级下拉菜单水平居中问题请各位老师指点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
/* common styling */
*{margin:0; padding:0;}
body {
    margin: auto auto;
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    color: #565656;
    background-color: #fff;
}
#header {
    width:1024px;
    background: #21242c repeat-x 0 0;
    height:88px;
    margin: auto auto;
}
#header .links {
        float: right;
        font-size: 11px;
        color: #999999;
        padding: 6px 25px;
    }
        #header .links a {
            color:#FFFFFF;
        }
        #header .links a:hover {
                color: #bd4939;
                border: 0 !important;
            }
    #header .logo {
        padding: 15px 26px 6px 25px;
        float: left;
    }
#header .menu {font-family: arial, sans-serif; width:770px; height:29px; position:relative; margin:0; font-size:12px; background:#21242c; float:left; padding:30px 0 0 2px;}
#header .menu ul {padding:0; margin:0 auto; list-style-type: none;}
#header .menu ul li {float:left; margin:0 auto;}
#header .menu ul li img{margin:13px 0px 0px 2px;}
#header .menu ul li a, .menu ul li a:visited {display:block; float:left; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#999999; background:#21242c bottom right no-repeat;}
#header .menu ul li ul {display: none;}
/* specific to non IE browsers */
#header .menu ul li:hover a {color:#fff; background:#3b3d49;}
#header .menu ul li:hover ul {display:block; position:absolute; width:897px; top:59px; left:-249px; background:#3b3d49; color:#fff; padding:0 0 0 127px;}
#header .menu ul li:hover ul li a.hide {background:#3b3d49  bottom right no-repeat; color:#fff;}
#header .menu ul li:hover ul li:hover a.hide {background:#3b3d49; color:#fff;}
#header .menu ul li:hover ul li ul {width:150px; display: none; height:25px;}
#header .menu ul li:hover ul li a {display:block; background:#3b3d49; color:#fff;}
#header .menu ul li:hover ul li a:hover {background:#3b3d49; color:#bd4939;}
#header .menu ul li:hover ul li:hover ul {display:block; position:absolute; width:150px; height:25px; left:0px; top:29px; color:#000; background:#8f9098; padding:0; margin:auto auto;}
#header .menu ul li:hover ul li:hover a.hide {background:#3b3d49; color:#bd4939; height:25px;}
#header .menu ul li:hover ul li:hover ul li a {width:150px; background:#8f9098; color:#fff; height:25px;}
#header .menu ul li:hover ul li:hover ul li a:hover {width:150px; background:#d3d3d4; color:#3b3d49; height:25px;}
</style>

</head>
<body>
<div id="header">
<p class="links">用户名:<font style="color:#fff"> 用户名</font> 　身份：<font style="color:#fff">test123 | <a href="#">退出系统</a></font></p>
    <div class="logo"><img src="images/logo.gif" width="198" height="53" /></div>
    <div class="menu">
<ul>
<li><a class="hide" href="">我的工作台</a>

<ul class="left_side">
<li><a class="hide" href="#">更改身份</a>

<ul>
<li><a href="#">部门：NIT部</a></li>
<li><a href="#">角色：N仓管员</a></li>
<li><a href="#">角色：N厦门财务主办会计</a></li>
<li><a href="#">角色：N厦门财务主办会计</a></li>
<li><a href="#">角色：N网络管理员</a></li>
<li><a href="#">角色：N软件工程师</a></li>
<li><a href="#">角色：N软件工程师</a></li>
<li><a href="#">角色：管理员</a></li>
<li><a href="#">角色：test123</a></li>
</ul>

<img src="images/small-b.gif" /></li>
<li><a href="#">返回首页</a><img src="images/small-b.gif" /></li>
<li><a href="#">修改密码</a><img src="images/small-b.gif" /></li>
<li><a href="#">退出系统</a><img src="images/small-b.gif" /></li>
</ul>

<img src="images/small.gif" /></li>
<li><a class="hide" href="#">销售系统</a>

<ul>
<li><a class="hide" href="#">工作任务</a>

<ul>
<li><a href="#">需处理的催款</a></li>
<li><a href="#">需审批的客户额度</a></li>
<li><a href="#">需审批的客户帐期</a></li>
<li><a href="#">导入火炬集团仓</a></li>
<li><a href="#">收据客户退货分配</a></li>
<li><a href="#">需跟踪的样品</a></li>
<li><a href="#">新帐号申请列表</a></li>
<li><a href="#">需审批的合同</a></li>
<li><a href="#">需转发货的合同</a></li>
<li><a href="#">需审批客户经理调整</a></li>
<li><a href="#">贸易商出售太诱合同确认</a></li>
<li><a href="#">贸易商申请出售太诱</a></li>
<li><a href="#">销售退货单原因确认</a></li>
</ul>

<img src="images/small-b.gif" /></li>
<li><a href="#">客户管理</a><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">客户联络管理</a>

<ul>
<li><a href="#">新增客户报告</a></li>
<li><a href="#">客户联络查询</a></li>
<li><a href="#">需联络超期的客户</a></li>
<li><a href="#">销售行程分析仓</a></li>
<li><a href="#">重点客户开发查询</a></li>
</ul>

<img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">销售合同</a>

<ul>
<li><a href="#">报价系统</a></li>
<li><a href="#">合同管理</a></li>
<li><a href="#">审批任务</a></li>
<li><a href="#">合同变更</a></li>
<li><a href="#">VMI库存管理</a></li>
<li><a href="#">合同跟踪</a></li>
<li><a href="#">送货单合并</a></li>
<li><a href="#">送货单</a></li>
<li><a href="#">退货管理</a></li>
<li><a href="#">综合查询</a></li>
<li><a href="#">发货指令表</a></li>
<li><a href="#">业务通知单</a></li>
<li><a href="#">价格变更</a></li>
<li><a href="#">有关库存</a></li>
<li><a href="#">发货情况查询</a></li>
<li><a href="#">来款登记</a></li>
</ul>

<img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">客户信用管理</a>

<ul>
<li><a href="#">客户信用级别调整</a></li>
<li><a href="#">客户信用A类设定</a></li>
<li><a href="#">信用积分重置</a></li>
<li><a href="#">合同变更</a></li>
<li><a href="#">更新已交易帐期</a></li>
<li><a href="#">货款超期30天对帐列表</a></li>
<li><a href="#">提交第三方催款审批</a></li>
<li><a href="#">申请第三方催款列表</a></li>
<li><a href="#">客户常规对帐</a></li>
<li><a href="#">发票签收</a></li>
<li><a href="#">应收款相对风险系数</a></li>
<li><a href="#">客户开发状态调整</a></li>
</ul>

<img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">销售费用管理</a>

<ul>
<li><a href="#">销售费用单查询</a></li>
<li><a href="#">费用单审批列表</a></li>
<li><a href="#">已审费用单分配</a></li>
<li><a href="#">销售费用汇总</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">销售目标管理</a>

<ul>
<li><a href="#">销售目标</a></li>
<li><a href="#">审批列表</a></li>
<li><a href="#">老客户重新按新客户提成清单</a></li>
<li><a href="#">销售目标（新）</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">推广服务</a>

<ul>
<li><a href="#">样品跟踪统计</a></li>
<li><a href="#">军品FAE项目</a></li>
<li><a href="#">民品FAE项目</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">统计分析</a>

<ul>
<li><a href="#">销售分析</a></li>
<li><a href="#">质量级别销售分析</a></li>
<li><a href="#">经销商销售分析</a></li>
<li><a href="#">销售与来款分析</a></li>
<li><a href="#">经销商直接客户</a></li>
<li><a href="#">销售业绩对帐</a></li>
<li><a href="#">销售业绩汇总</a></li>
<li><a href="#">月业绩统计</a></li>
<li><a href="#">军品使用分析</a></li>
<li><a href="#">样品统计</a></li>
<li><a href="#">备货统计</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a href="#">年会计划</a></li><li><img src="images/small-b.gif" /></li>
</ul>

</li><li><img src="images/small.gif" /></li>
<li><a class="hide" href=" ">库存和物流</a>

<ul>
<li><a class="hide" href="#">入库管理</a>

<ul>
<li><a href="#">芯片采购入加</a></li>
<li><a href="#">生产原辅料入库</a></li>
<li><a href="#">特选产品入库</a></li>
<li><a href="#">生产产品入库</a></li>
<li><a href="#">半成品入库</a></li>
<li><a href="#">销售退货入库</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">发货管理</a>

<ul>
<li><a href="#">调拨单审核列表</a></li>
<li><a href="#">出库任务队列</a></li>
<li><a href="#">打印客户商标</a></li>
<li><a href="#">任务完成统计</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">库存领用</a>

<ul>
<li><a href="#">生产领用</a></li>
<li><a href="#">试验中心领用</a></li>
<li><a href="#">其他领用</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">库存查询</a>

<ul>
<li><a href="#">库存总帐</a></li>
<li><a href="#">架位台帐</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">仓库管理</a>

<ul>
<li><a href="#">库存台帐</a></li>
<li><a href="#">盘盈盘亏</a></li>
<li><a href="#">报废处理</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">物流管理</a>

<ul>
<li><a href="#">特选各部门交接确认</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">统计分析</a>

<ul>
<li><a href="#">运输费用查询</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a href="#">有关库存</a></li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">仓库信息配置</a>

<ul>
<li><a href="#">亚电库存下限</a></li>
<li><a href="#">架位信息设置</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
</ul>

</li><li><img src="images/small.gif" /></li>
<li><a class="hide" href="#">采购管理</a>

<ul>
<li><a class="hide" href="#">工作任务查询</a>

<ul>
<li><a href="#">交付能力评审</a></li>
<li><a href="#">合同变更评审</a></li>
<li><a href="#">策略规格审批列表</a></li>
<li><a href="#">策略规格批准列表</a></li>
<li><a href="#">应急库存管理</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">采购计划</a>

<ul>
<li><a href="#">雷度采购计划</a></li>
<li><a href="#">火炬采购计划</a></li>
<li><a href="#">采购计划通知</a></li>
<li><a href="#">采购计划汇总</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">请购单</a>

<ul>
<li><a href="#">请购申请单</a></li>
<li><a href="#">请购通知单</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">采购订单</a>

<ul>
<li><a href="#">采购订单查询</a></li>
<li><a href="#">采购订单撤消</a></li>
<li><a href="#">来料通知单</a></li>
<li><a href="#">采购退货单</a></li>
<li><a href="#">订单量分析</a></li>
<li><a href="#">销售量分析</a></li>
<li><a href="#">订单综合查询</a></li>
<li><a href="#">收料单详查</a></li>
<li><a href="#">辅料收料单</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">采购询价</a>

<ul>
<li><a href="#">询价单查询</a></li>
<li><a href="#">询价计划单</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">内部调拔</a>

<ul>
<li><a href="#">调拨列表</a></li>
<li><a href="#">调拨单查询</a></li>
<li><a href="#">业务通知单</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">价格维护</a>

<ul>
<li><a href="#">火炬价格策略</a></li>
<li><a href="#">雷度价格策略</a></li>
<li><a href="#">库存下限设定</a></li>
<li><a href="#">未审入库单价</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">供方管理</a>

<ul>
<li><a href="#">供应商资料</a></li>
<li><a href="#">合格供方评价</a></li>
<li><a href="#">SubCode登记</a></li>
<li><a href="#">SubCode查询</a></li>
<li><a href="#">PM报告</a></li>
<li><a href="#">PM报告查询</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">供应商关系</a>

<ul>
<li><a href="#">业绩对帐</a></li>
<li><a href="#">设置不进入计算的合同单号</a></li>
<li><a href="#">原厂移交客户销售奖励</a></li>
<li><a href="#">太诱月报表</a></li>
<li><a href="#">KEMET月报表</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a href="#">有关库存</a></li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">采购报表</a>

<ul>
<li><a href="#">KEMET报表</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
</ul>

</li><li><img src="images/small.gif" /></li>
<li><a class="hide" href="#">技术与质量</a>

<ul>
<li><a class="hide" href="#">工作任务列表</a>

<ul>
<li><a href="#">特选交付能力评审</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a href="#">货品资料</a></li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">质量投诉</a>

<ul>
<li><a href="#">客户质理投诉处理表</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">超声波检查</a>

<ul>
<li><a href="#">载入当前任务</a></li>
<li><a href="#">任务列表管理</a></li>
<li><a href="#">超声波任务排程情况</a></li>
<li><a href="#">超声波检查过程记录</a></li>
<li><a href="#">生产能力列表</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a href="#">研究项目</a></li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">质量统计</a>

<ul>
<li><a href="#">军筛分析</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
</ul>

</li><li><img src="images/small.gif" /></li>
<li><a class="hide" href="#">OA</a>

<ul>
<li><a href="#">用户列表</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">角色管理</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">菜单管理</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">福利参数设置</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">考勤审核列表</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">角色分配</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">FAQ</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">员工基本信息</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">加班单</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">请假单</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">外出单</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">出差单</a></li><li><img src="images/small-b.gif" /></li>
</ul>

</li><li><img src="images/small.gif" /></li>
<li><a class="hide" href="#">财务管理</a>

<ul>
<li><a class="hide" href="#">任务列表</a>

<ul>
<li><a href="#">销售费用确认</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">应付帐</a>

<ul>
<li><a href="#">制作供方发票</a></li>
<li><a href="#">供方发票审核</a></li>
<li><a href="#">未税收料入帐</a></li>
<li><a href="#">应付帐款</a></li>
<li><a href="#">已收料尚未开票帐</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">应收款</a>

<ul>
<li><a href="#">制作销售发票</a></li>
<li><a href="#">金税发票接口</a></li>
<li><a href="#">销项发票审核</a></li>
<li><a href="#">销售退票管理</a></li>
<li><a href="#">销售发票折扣</a></li>
<li><a href="#">销项发票汇总</a></li>
<li><a href="#">销售发票日报</a></li>
<li><a href="#">应收帐款</a></li>
<li><a href="#">已发货尚未开票帐</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">现金管理</a>

<ul>
<li><a href="#">付款单</a></li>
<li><a href="#">预付款分配</a></li>
<li><a href="#">收款单</a></li>
<li><a href="#">预收款分配</a></li>
<li><a href="#">财务费用单</a></li>
<li><a href="#">收款单移款</a></li>
<li><a href="#">取消来款分配</a></li>
<li><a href="#">来款汇总表</a></li>
<li><a href="#">汇票管理</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">财务计划</a>

<ul>
<li><a href="#">采购付款计划</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">香港业务</a>

<ul>
<li><a href="#">业务通知单</a></li>
<li><a href="#">香港发票单</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">财务分析</a>

<ul>
<li><a href="#">开票业绩统计</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a class="hide" href="#">其它</a>

<ul>
<li><a href="#">导入送货单</a></li>
<li><a href="#">导入来料单</a></li>
<li><a href="#">数据月结</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
</ul>

</li><li><img src="images/small.gif" /></li>
<li><a class="hide" href="#">IT</a>

<ul>
<li><a class="hide" href="#">任务列表</a>

<ul>
<li><a href="#">软件开发项目</a></li>
<li><a href="#">开发项目月报表</a></li>
</ul>

</li><li><img src="images/small-b.gif" /></li>
<li><a href="#">服务器状态查询</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">知识目录维护</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">知识库标鉴维护</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">系统配置</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">权限管理</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">问题反馈</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">保留菜单</a></li><li><img src="images/small-b.gif" /></li>
</ul>

</li><li><img src="images/small.gif" /></li>
<li><a class="hide" href="#">Z集团帐务</a>

<ul>
<li><a href="#">收款单据</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">付款单据</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">新增收款</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">新增付款</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">科目管理</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">现金报表</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">收款分配</a></li><li><img src="images/small-b.gif" /></li>
<li><a href="#">付款分配</a></li><li><img src="images/small-b.gif" /></li>
</ul>

</li><li><img src="images/small.gif" /></li>
</ul>
</div>
</div>
</body>
</html>
上面代码主要实现的网页导航条三级下拉菜，二级为横的，三级为竖的功能实现了；为什么不能够实现水平居中对齐？希望能得到高手帮忙和指点~~在此先谢谢了！

搜索更多相关主题的帖子: css　菜单　老师　水平　