下拉菜单的问题，请高手帮忙

请求高手解决的问题
1。整个页面居中
2。下拉子菜单鼠标放上去要有颜色，跟主菜单效果一样
3。子菜单有点不好点，会缩回去。自己试了很久，不行，水平太差，请高手们帮忙。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Welcome to Haithabu </title> <style type="text/css"> 
        * { 
            padding:0; 
            margin:0; 
        } 
        body { 
            font-family:verdana, sans-serif; 
            font-size:small; 
        } 
        #navigation, #navigation li ul { 
            list-style-type:none; 
        } 
        #navigation { 
            margin:20px; 
        } 
        #navigation li { 
            float:left; 
            text-align:left; 
            position:relative; 
        } 
        #navigation li a:link, #navigation li a:visited { 
            display:block; 
            text-decoration:none; 
            color:#606060; 
            width:130px; 
            height:18px; 
            line-height:18px; 
            border:1px solid #fff; 
            border-width:1px 1px 0 0; 
            background:#D0CFCF; 
            padding-left:10px; 
        } 
        #navigation li a:hover { 
            color:#FF0035; 
            background:#C6C5C5; 
        } 
        #navigation li ul li a:hover { 
            color:#FF0035; 
            background:#6b839c; 
        } 
        #navigation li ul { 
            display:none; 
            position:absolute; 
            top:18px; 
            left:0; 
            margin-top:2px; 
            width:120px; 
        } 
        #navigation li ul li ul { 
            display:none; 
            position:absolute; 
            top:0px; 
            left:130px; 
            margin-top:0; 
            margin-left:130px; 
            width:120px; 
        }         #navigation li ul li a:link, #navigation li ul li  a:visited { 
            display:block; 
            text-decoration:none; 
            color:#606060; 
            width:220px; 
            height:20px; 
            line-height:20px; 
            border:0px solid #fff; 
            border-width:0px 0px 0 0; 
            background:#D0CFCF; 
            padding-left:10px; 
        }     .unnamed1 {  font-family: Arial, Helvetica, sans-serif; font-size: 10pt; line-height: 16pt; color: #4e4d4d} 
</style> 
<script type="text/javascript"> 
        function displaySubMenu(li) { 
            var subMenu = li.getElementsByTagName("ul")[0]; 
            subMenu.style.display = "block"; 
        } 
        function hideSubMenu(li) { 
            var subMenu = li.getElementsByTagName("ul")[0]; 
            subMenu.style.display = "none"; 
        } 
    </script> 
</head> 
<body leftmargin="20" marginwidth="20"> 
<div align="left"> 
  <table width="721" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
<td width="20"> </td> 
      <td width="163"> <img src="images/logo.jpg" width="163" height="51"> </td> 
      <td>&nbsp;</td> 
      <td width="203"> <img src="images/www.gif" width="203" height="51"> </td> 
    </tr> 
  </table> 
  <ul id="navigation"> 
    <li  bgcolor="#D0CFCF"> <b> <a href="index.html">Home </a> </b> 
    <li> <a href="about.html"> <b>About Us </b> </a> 
    <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="service.html"> <b>Our 
      Serivce </b> </a> 
      <ul>
        <li> <a href="service.html">sourcing services </a> </li>
        <li> <a href="service2.html">Overseas Projects Procurement </a> </li>
        <li> <a href="service3.html">Project Development Support </a> </li>
        <li> <a href="service4.html">Consulting Services </a> </li>
      </ul> 
    </li> 
    <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="product.html"> <b>Our 
      Product </b> </a> 
      <ul>
        <li> <a href="product.html">SUMAX modules </a> </li>
        <li> <a href="product2.html">PV systems components </a> </li>
      </ul> 
    </li> 
    <li> <a href="contact.html"> <b>Contact Us </b> </a> </li> 
  </ul>   
  <table width="724" border="0" cellspacing="0" cellpadding="0" height="24">
    <tr> 
      <td width="20"></td>
      <td background="images/bg.gif">&nbsp;</td>
    </tr>
  </table>
  
</div>
</body>
</html>

解决方案 »

  1.   

            #navigation li ul { 
                display:none; 
                position:absolute; 
                top:18px;   =============改小一点就好了
                left:0; 
                margin-top:2px; 
                width:120px; 
            } 
      

  2.   

    改好了  3。子菜单有点不好点，会缩回去。 这个问题 是因为 li的立面有a元素 会触发onmouseout事件 所以 这个我没改 你自己将a设置成块级元素 触发事件设置在a元素里面
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Welcome to Haithabu </title> <style type="text/css"> 
            * { 
                padding:0; 
                margin:0; 
            } 
            body { 
                font-family:verdana, sans-serif; 
                font-size:small; 
            } 
            #navigation, #navigation li ul { 
                list-style-type:none; 
            } 
            #navigation { 
                margin:20px; 
            } 
            #navigation li { 
                float:left; 
                text-align:left; 
                position:relative; 
            } 
            #navigation li a:link, #navigation li a:visited { 
                display:block; 
                text-decoration:none; 
                color:#606060; 
                width:130px; 
                height:18px; 
                line-height:18px; 
                border:1px solid #fff; 
                border-width:1px 1px 0 0; 
                background:#D0CFCF; 
                padding-left:10px; 
            } 
            #navigation li a:hover { 
                color:#FF0035; 
                background:#C6C5C5; 
            } 
            #navigation li ul li a:hover { 
                color:#FF0035; 
                background:#6b839c; 
            } 
            #navigation li ul { 
                display:none; 
                position:absolute; 
                top:18px; 
                left:0; 
                margin-top:2px; 
                width:120px; 
            } 
            #navigation li ul li ul { 
                display:none; 
                position:absolute; 
                top:0px; 
                left:130px; 
                margin-top:0; 
                margin-left:130px; 
                width:120px; 
            } 
            #navigation li ul li a:link, #navigation li ul li  a:visited { 
                display:block; 
                text-decoration:none; 
                color:#606060; 
                width:220px; 
                height:20px; 
                line-height:20px; 
                border:0px solid #fff; 
                border-width:0px 0px 0 0; 
                background:#D0CFCF; 
                padding-left:10px; 
            } 
    #navigation li ul li a:hover{
    color:#FF0035; 
                background:#6b839c; 
    font-weight:bold;
    }    .unnamed1 {  font-family: Arial, Helvetica, sans-serif; font-size: 10pt; line-height: 16pt; color: #4e4d4d} 
    </style> 
    <script type="text/javascript"> 
            function displaySubMenu(li) { 
                var subMenu = li.getElementsByTagName("ul")[0]; 
                if(subMenu.style.display != "block")
    subMenu.style.display = "block"; 
            } 
            function hideSubMenu(li) { 
                var subMenu = li.getElementsByTagName("ul")[0]; 
                if(subMenu.style.display != "none")
    subMenu.style.display = "none"; 
            } 
        </script> 
    </head> 
    <body leftmargin="20" marginwidth="20"> 
    <div style="width:1003px;padding-left:100px;"> 
      <table width="721" border="0" cellspacing="0" cellpadding="0"> 
        <tr> 
    <td width="20"> </td> 
          <td width="163"> <img src="images/logo.jpg" width="163" height="51"> </td> 
          <td>&nbsp; </td> 
          <td width="203"> <img src="images/www.gif" width="203" height="51"> </td> 
        </tr> 
      </table> 
      <ul id="navigation"> 
        <li  bgcolor="#D0CFCF"> <b> <a href="index.html">Home </a> </b> 
        <li> <a href="about.html"> <b>About Us </b> </a> 
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="service.html"> <b>Our 
          Serivce </b> </a> 
          <ul class="sub_menu"> 
            <li> <a href="service.html">sourcing services </a> </li> 
            <li> <a href="service2.html">Overseas Projects Procurement </a> </li> 
            <li> <a href="service3.html">Project Development Support </a> </li> 
            <li> <a href="service4.html">Consulting Services </a> </li> 
          </ul> 
        </li> 
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="product.html"> <b>Our 
          Product </b> </a> 
          <ul class="sub_menu"> 
            <li> <a href="product.html">SUMAX modules </a> </li> 
            <li> <a href="product2.html">PV systems components </a> </li> 
          </ul> 
        </li> 
        <li> <a href="contact.html"> <b>Contact Us </b> </a> </li> 
      </ul> 
      
      <table width="724" border="0" cellspacing="0" cellpadding="0" height="24"> 
        <tr> 
          <td width="20"> </td> 
          <td background="images/bg.gif">&nbsp; </td> 
        </tr> 
      </table> 
      
    </div> 
    </body> 
    </html>
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Welcome to Haithabu </title> <style type="text/css"> 
            * { 
                padding:0; 
                margin:0; 
            }
    .center{
    MARGIN-LEFT: auto;
    margin-right:auto;
    width:706px;
    vertical-align:middle;
    line-height:200px;
    }  
            body { 
                font-family:verdana, sans-serif; 
                font-size:small; 
            } 
            #navigation, #navigation li ul { 
                list-style-type:none; 
            } 
            #navigation { 
                margin:20px; 
            } 
            #navigation li { 
                float:left; 
                text-align:left; 
                position:relative; 
            } 
            #navigation li a:link, #navigation li a:visited { 
                display:block; 
                text-decoration:none; 
                color:#606060; 
                width:130px; 
                height:18px; 
                line-height:18px; 
                border:1px solid #fff; 
                border-width:1px 1px 0 0; 
                background:#D0CFCF; 
                padding-left:10px; 
            } 
            #navigation li a:hover { 
                color:#FF0035; 
                background:#C6C5C5; 
            } 
            #navigation li ul li a:hover { 
                color:#FF0035; 
                background:#6b839c; 
            } 
            #navigation li ul { 
                display:none; 
                position:absolute; 
                top:18px; 
                left:0; 
                margin-top:2px; 
                width:120px; 
            } 
            #navigation li ul li ul { 
                display:none; 
                position:absolute; 
                top:0px; 
                left:130px; 
                margin-top:0; 
                margin-left:130px; 
                width:120px; 
            }
    .center{ MARGIN-RIGHT: auto;
    MARGIN-LEFT: auto;
    margin-right:auto;
    width:706px;
    vertical-align:middle;
    line-height:200px;
    }          #navigation li ul li a:link, #navigation li ul li  a:visited { 
                display:block; 
                text-decoration:none; 
                color:#606060; 
                width:220px; 
                height:20px; 
                line-height:20px; 
                border:0px solid #fff; 
                border-width:0px 0px 0 0; 
                background:#D0CFCF; 
                padding-left:10px; 
            }     .unnamed1 {  font-family: Arial, Helvetica, sans-serif; font-size: 10pt; line-height: 16pt; color: #4e4d4d}
    #navigation li a:link, #navigation li a:visited { 
                display:block; 
                text-decoration:none; 
                color:#606060; 
                width:130px; 
                height:18px; 
                line-height:18px; 
                border:1px solid #fff; 
                border-width:1px 1px 0 0; 
                background:#D0CFCF; 
                padding-left:10px; 
            } 
            #navigation li a:hover { 
                color:#FF0035; 
                background:#C6C5C5; 
            } 
            #navigation li ul li a:hover { 
                color:#FF0035; 
                background:#6b839c; 
            } 
            #navigation li ul { 
                display:none; 
                position:absolute; 
                top:17px; 
                left:0; 
                margin-top:2px; 
                width:120px; 
            } 
            #navigation li ul li ul { 
                display:none; 
                position:absolute; 
                top:0px; 
                left:130px; 
                margin-top:0; 
                margin-left:130px; 
                width:120px; 
            } 
            #navigation li ul li a:link, #navigation li ul li  a:visited { 
                display:block; 
                text-decoration:none; 
                color:#606060; 
                width:220px; 
                height:20px; 
                line-height:20px; 
                border:0px solid #fff; 
                border-width:0px 0px 0 0; 
                background:#D0CFCF; 
                padding-left:10px; 
            } 
    #navigation li ul li a:hover{ 
    color:#FF0035; 
                background:#6b839c; 
    font-weight:bold; 
    }     .unnamed1 {  font-family: Arial, Helvetica, sans-serif; font-size: 10pt; line-height: 16pt; color: #4e4d4d} 
    #navigation li ul li a:hover{ 
    color:#FF0035; 
                background:#6b839c; 
    font-weight:bold; 
    } 
    </style> 
    <script type="text/javascript"> 
            function displaySubMenu(li) { 
                var subMenu = li.getElementsByTagName("ul")[0]; 
                subMenu.style.display = "block"; 
            } 
            function hideSubMenu(li) { 
                var subMenu = li.getElementsByTagName("ul")[0]; 
                subMenu.style.display = "none"; 
            } 
        </script> 
    </head> 
    <body leftmargin="20" marginwidth="20"> 
    <div align="center"> 
      <table width="721" border="0" cellspacing="0" cellpadding="0"> 
        <tr> 
    <td width="20"> </td> 
          <td width="163"> <img src="images/logo.jpg" width="163" height="51"> </td> 
          <td>&nbsp; </td> 
          <td width="203"> <img src="images/www.gif" width="203" height="51"> </td> 
        </tr> 
      </table> 
      <ul id="navigation" class="center" > 
        <li  bgcolor="#D0CFCF"> <b> <a href="index.html">Home </a> </b> 
        <li> <a href="about.html"> <b>About Us </b> </a> 
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="service.html"> <b>Our 
          Serivce </b> </a> 
          <ul> 
            <li> <a href="service.html">sourcing services </a> </li> 
            <li> <a href="service2.html">Overseas Projects Procurement </a> </li> 
            <li> <a href="service3.html">Project Development Support </a> </li> 
            <li> <a href="service4.html">Consulting Services </a> </li> 
          </ul> 
        </li> 
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="product.html"> <b>Our 
          Product </b> </a> 
          <ul> 
            <li> <a href="product.html">SUMAX modules </a> </li> 
            <li> <a href="product2.html">PV systems components </a> </li> 
          </ul> 
        </li> 
        <li> <a href="contact.html"> <b>Contact Us </b> </a> </li> 
      </ul>   
      <table width="724" border="0" cellspacing="0" cellpadding="0" height="24"> 
        <tr> 
          <td width="20"> </td> 
          <td background="images/bg.gif">&nbsp; </td> 
        </tr> 
      </table> 
      
    </div> 
    </body> 
    </html>