CSS问题

如何将导航条的子莱单横向居中显示。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>标题</title>
    
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css"> 
<!-- 
* {margin:0;padding:0;border:0;} #nav { 
height: 24px;  list-style-type: none;  padding-left:20px; 
line-height:24px;background:#66CCFF; 
} 
#nav a { 
display: block; width: 110px; text-align:center; 
} 
#nav a:link  { 
color:#CC00FF; text-decoration:none; 
} 
#nav a:visited  { 
color:#6633FF;text-decoration:none; 
} 
#nav a:hover  { 
color:#3333FF;text-decoration:none;font-weight:bold;background:#66CC66; 
} 
#nav li { 
float:left; width: 100px; 
} 
#nav li ul { 
line-height: 24px; 
list-style-type: none; 
text-align:center; 
left: -888px; 
width: 720px; //注意,这里一定要设置宽度; 
position: absolute; 
background:#0099FF; 
} 
#nav li ul li{ 
float:left;
width: 80px; //float就是子菜单横向的关键,可以继承父菜单而省略float 
} 
#nav li ul a{ 
display: block;
 width:100px;
 text-align:center;
 padding-left:1px; 
} 
#nav li ul a:link  { 
color:#3333FF; 
text-decoration:none; 
} 
#nav li ul a:visited  { 
color:#F1F1F1;
text-decoration:none; 
} 
#nav li ul a:hover  { 
color:#FFFF33;
text-decoration:none;
font-weight:normal;
background:#66CC66; 
} 
#nav li:hover ul { 
left:1%; 
} 
#nav li.sfhover ul { 
left:13%; 
} 
#content { 
clear: center; 
} 
.STYLE9 {color: #CC00FF}
.STYLE10 {color: #FFFFFF}#Layer1 {
position:absolute;
left:70px;
top:auto;  
width:914px;
height:765px;
z-index:1;
}
body {
background-color: #ffffffff;
}
-->
</style>  </head>
  
  <body>
 <script language="javascript"> 
function menuFix() { 
var sfEls = document.getElementById("nav").getElementsByTagName("li"); 
for (var i=0; i<sfEls.length; i++) { 
sfEls[i].onmouseover=function() { 
this.className+=(this.className.length>0? " ": "") + "sfhover"; 
} 
sfEls[i].onMouseDown=function() { 
this.className+=(this.className.length>0? " ": "") + "sfhover"; 
} 
sfEls[i].onMouseUp=function() { 
this.className+=(this.className.length>0? " ": "") + "sfhover"; 
} 
sfEls[i].onmouseout=function() { 
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 
""); 
} 
} 
} 
window.onload=menuFix; 
</script><table width="830" border="1">
  <tr>
    <td width="15">&nbsp;</td>
    <td width="790" align="center" valign="middle"><img src="./images/banner.jpg" width="867" height="200"></td>
    <td width="15">&nbsp;</td>
  </tr>
</table><div id="Layer1" style="top: 225px; left: 80px; height: 33px;"><table border="1" style="top: 197px; left: 75px; width: 900px;" height="35"><tr>
<td width="830" height="29">
<span class="STYLE9"></span> 
   <ul id="nav">
   
    <li><a href="./index.jsp">首页</a></li>
    <li><a href="#">莱单一</a>
        <ul>
          <li><a href="./jianjie.jsp">子莱单一</a></li>
          <li><a href="./hoster.jsp">子莱单一</a></li>
          <li><a href="./culture.jsp">&nbsp;&nbsp;子莱单一</a></li>
          <li><a href="./International.jsp">&nbsp;&nbsp;&nbsp; 子莱单一</a></li>
        </ul>
    </li>
    <li><a href="#">莱单二</a>
        <ul>
          <li><a href="infomation.do?action=fenye&sign=start">子莱单二</a></li>
          <li><a href="./infomation.jsp">子莱单二</a></li>
          <li><a href="./sportinfo.jsp">子莱单二</a></li>
        </ul>
    </li>
    <li class="STYLE10"><a href="#">莱单三</a>
        <ul>
          <li><a href="./device.jsp">子莱单三</a></li>
          <li><a href="./standards.jsp ">子莱单三</a></li>
          <li><a href="./round.jsp">子莱单三</a></li>
          <li><a href="./equipment.jsp">子莱单三</a></li>
          <li><a href="./liucheng.jsp">子莱单三</a></li>
        </ul>
    </li>
    <li><a href="#">莱单四</a>
        <ul>
          <li><a href="./shili.jsp">子莱单四</a></li>
          <li><a href="./shebei.jsp">子莱单四</a></li>
          <li><a href="./center.jsp">子莱单四</a></li>
          <li><a href="./success.jsp">子莱单四</a></li>
        </ul>
    </li>
    <li><a href="#">莱单五</a>
        <ul>
          <li><a href="./inter.jsp">子莱单五</a></li>
          <li><a href="./personal.jsp">子莱单五</a></li>
          <li><a href="./zhaopininfo.jsp">子莱单五</a></li>
        </ul>
    </li>
    <li><a href="#">莱单六</a>
        <ul>
          <li><a href="./liuyan.jsp">子莱单六</a></li>
          <li><a href="./service.jsp">子莱单六</a></li>
          <li><a href="./contact.jsp">子莱单六</a></li>
        </ul>
    </li>
  </ul>
</td>
</tr>
</table>
<blockquote>&nbsp;</blockquote>
</div>  </body>
</html>
怎么能让子莱单居中在父莱单下面

解决方案 »

  1.   

    this?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    <html>
      <head> 
        <base href=" <%=basePath%>"> 
        
        <title>css</title> 
        
    <meta http-equiv="pragma" content="no-cache"> 
    <meta http-equiv="cache-control" content="no-cache"> 
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
    <meta http-equiv="description" content="This is my page"> 
    <!-- 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    --> 
    <style type="text/css"> 
    <!-- 
    * {margin:0;padding:0;border:0;} #nav { 
    height: 24px;  list-style-type: none;  padding-left:20px; 
    line-height:24px;background:#66CCFF; 
    } 
    #nav a { 
    display: block; width: 110px; text-align:center; 
    } 
    #nav a:link  { 
    color:#CC00FF; text-decoration:none; 
    } 
    #nav a:visited  { 
    color:#6633FF;text-decoration:none; 
    } 
    #nav a:hover  { 
    color:#3333FF;text-decoration:none;font-weight:bold;background:#66CC66; 
    } 
    #nav li { 
    float:left; width: 100px; 
    } 
    #nav li ul { 
    line-height: 24px; 
    list-style-type: none; 
    text-align:center; 
    left: -888px; 
    width: 720px; //注意,这里一定要设置宽度; 
    position: absolute; 
    background:#0099FF; 
    } 
    #nav li ul li{ 
    float:left; 
    width: 80px; //float就是子菜单横向的关键,可以继承父菜单而省略float 
    } 
    #nav li ul a{ 
    display: block; 
    width:100px; 
    text-align:center; 
    padding-left:1px; 
    } 
    #nav li ul a:link  { 
    color:#3333FF; 
    text-decoration:none; 
    } 
    #nav li ul a:visited  { 
    color:#F1F1F1; 
    text-decoration:none; 
    } 
    #nav li ul a:hover  { 
    color:#FFFF33; 
    text-decoration:none; 
    font-weight:normal; 
    background:#66CC66; 
    } 
    #nav li:hover ul { 
    left:1%; 
    } 
    #nav li.sfhover ul { 
    left:13%; 
    } 
    #content { 
    clear: center; 
    } 
    .STYLE9 {color: #CC00FF} 
    .STYLE10 {color: #FFFFFF} #Layer1 { 
    position:absolute; 
    left:70px; 
    top:auto;  
    width:914px; 
    height:765px; 
    z-index:1; 
    } 
    body { 
    background-color: #ffffffff; 
    } 
    --> 
    </style>   </head> 
      
      <body> 
    <script language="javascript">
    function setP(_this,_left){
    var obj=_this.getElementsByTagName("ul")
    if (obj.length>0)obj[0].style.left=_left+"px" } 
    function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i <sfEls.length; i++) { 
    sfEls[i].onmouseover=function() {setP(this,60)} 
    sfEls[i].onMouseDown=function() {setP(this,60)}
    sfEls[i].onMouseUp=function() {setP(this,60)}
    sfEls[i].onmouseout=function() {setP(this,-1000)}
    } 
    } 
    window.onload=menuFix; 
    </script> <table width="830" border="1"> 
      <tr> 
        <td width="15">&nbsp; </td> 
        <td width="790" align="center" valign="middle"> <img src="./images/banner.jpg" width="867" height="200"> </td> 
        <td width="15">&nbsp; </td> 
      </tr> 
    </table> <div id="Layer1" style="top: 225px; left: 80px; height: 33px;"> <table border="1" style="top: 197px; left: 75px; width: 900px;" height="35"> <tr> 
    <td width="830" height="29"> 
    <span class="STYLE9"> </span> 
      <ul id="nav"> 
        <li> <a href="./index.jsp">首页 </a> </li> 
        <li> <a href="#">莱单一 </a> 
            <ul> 
              <li> <a href="./jianjie.jsp">子莱单一 </a> </li> 
              <li> <a href="./hoster.jsp">子莱单一 </a> </li> 
              <li> <a href="./culture.jsp">&nbsp;&nbsp;子莱单一 </a> </li> 
              <li> <a href="./International.jsp">&nbsp;&nbsp;&nbsp; 子莱单一 </a> </li> 
            </ul> 
        </li> 
        <li> <a href="#">莱单二 </a> 
            <ul> 
              <li> <a href="infomation.do?action=fenye&sign=start">子莱单二 </a> </li> 
              <li> <a href="./infomation.jsp">子莱单二 </a> </li> 
              <li> <a href="./sportinfo.jsp">子莱单二 </a> </li> 
            </ul> 
        </li> 
        <li class="STYLE10"> <a href="#">莱单三 </a> 
            <ul> 
              <li> <a href="./device.jsp">子莱单三 </a> </li> 
              <li> <a href="./standards.jsp ">子莱单三 </a> </li> 
              <li> <a href="./round.jsp">子莱单三 </a> </li> 
              <li> <a href="./equipment.jsp">子莱单三 </a> </li> 
              <li> <a href="./liucheng.jsp">子莱单三 </a> </li> 
            </ul> 
        </li> 
        <li> <a href="#">莱单四 </a> 
            <ul> 
              <li> <a href="./shili.jsp">子莱单四 </a> </li> 
              <li> <a href="./shebei.jsp">子莱单四 </a> </li> 
              <li> <a href="./center.jsp">子莱单四 </a> </li> 
              <li> <a href="./success.jsp">子莱单四 </a> </li> 
            </ul> 
        </li> 
        <li> <a href="#">莱单五 </a> 
            <ul> 
              <li> <a href="./inter.jsp">子莱单五 </a> </li> 
              <li> <a href="./personal.jsp">子莱单五 </a> </li> 
              <li> <a href="./zhaopininfo.jsp">子莱单五 </a> </li> 
            </ul> 
        </li> 
        <li> <a href="#">莱单六 </a> 
            <ul> 
              <li> <a href="./liuyan.jsp">子莱单六 </a> </li> 
              <li> <a href="./service.jsp">子莱单六 </a> </li> 
              <li> <a href="./contact.jsp">子莱单六 </a> </li> 
            </ul> 
        </li> 
      </ul> 
    </td> 
    </tr> 
    </table> 
    <blockquote>&nbsp; </blockquote> 
    </div>  </body> 
    </html>