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

请高手帮忙看一下下面的代码，我想把菜单高度调成： 18
子菜单宽度为：220下面的代码有一些看不懂，所以请高手帮忙，万分感谢。
<!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:center;
            position:relative;
        }
               #navigation li a:link, #navigation li a:visited {
            display:block; 
            text-decoration:none; 
            color:#606060; 
            width:125px; 
            height:40px; 
            line-height:40px; 
            border:1px solid #fff; 
            border-width:1px 1px 0 0; 
            background:#D0CFCF; 
            padding-left:10px; 
        }
        #navigation li a:hover {
            color:#fff;
            background:#C6C5C5;
        }
        #navigation li ul li a:hover {
            color:#fff;
            background:#6b839c; 
        }
        #navigation li ul {
            display:none;
            position:absolute; 
            top:40px;
            left:0;
            margin-top:1px;
            width:120px;
        }
        #navigation li ul li ul {
            display:none;
            position:absolute; 
            top:0px;
            left:130px; 
            margin-top:0;
            margin-left:130px;
            width:120px;
        }
    .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>
</div>
</body>
</html>

解决方案 »

  1.   

    高度18是不是太小了？控制菜单样式的CSS代码：
    #navigation { 
       margin:20px; 
    }
    可以在其中添加height:18px;控制子菜单样式：
    #navigation li ul { 
       display:none; 
       position:absolute; 
       top:40px; 
       left:0; 
       margin-top:1px; 
       width:120px;  /* 宽度 */
    } 
      

  2.   

    上面的高手朋友，按你的调了，没有用，             
    定义菜单的宽度，在下面的代码中，
     #navigation li a:link, #navigation li a:visited { 
                display:block; 
                text-decoration:none; 
                color:#606060; 
                width:125px; 
                height:40px; 
                line-height:40px;但我把line-height:40px;改为20px时，想点下拉菜单时，会消失，也就是鼠标放在菜单上，子菜单虽然出来，但想点子菜单时，子菜单会消失。
    有高手帮帮忙吗？
      

  3.   

    #navigation li ul { 
                display:none; 
                position:absolute; 
                top:40px; //改为20px            left:0; 
                margin-top:1px; 
                width:120px; 
            } 
      

  4.   

    是否如楼主所需？<!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:center; 
                position:relative; 
            } 
            #navigation li a:link, #navigation li a:visited { 
                display:block; 
                text-decoration:none; 
                color:#606060; 
                width:125px; 
                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:#fff; 
                background:#C6C5C5; 
            } 
            #navigation li ul li a:hover { 
                color:#fff; 
                background:#6b839c; 
            } 
            #navigation li ul { 
                display:none; 
                position:absolute; 
                top:18px; 
                left:0; 
                margin-top:1px; 
                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:18px; 
                line-height:18px; 
                border:1px solid #fff; 
                border-width:1px 1px 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> 
    </div> 
    </body> 
    </html>
      

  5.   

    非常感谢  jol_boy   ，这次的OK了