下拉菜单的问题，点子菜单会缩回去，请高手帮忙！

问题： 
当想点子菜单时，会缩回去，不太好点，高手帮忙看看哪个小地方有问题。 
<!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:Arial; 
            font-size:10pt; 
        } 
        #navigation, #navigation li ul { 
            list-style-type:none; 
        } 
        #navigation { 
            margin:20px; 
            margin-bottom:0px; 
        } 
        #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:133px; 
            height:18px; 
            line-height:18px; 
            border:1px solid #fff; 
            border-width:1px 1px 0 0; 
            background:#E7E7E7; 
            padding-left:10px; 
        } 
        #navigation li a:hover { 
            color:#F4F4F4; 
            background:#676566; 
        } 
        #navigation li ul li a:hover { 
            color:#F4F4F4; 
            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:18px; 
            left:130px; 
            margin-top:2; 
            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:22px; 
            line-height:22px; 
            border:0px solid #fff; 
            border-width:0px 0px 0 0; 
            background:#E7E7E7; 
            padding-left:5px; 
        }     .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:#E7E7E7; 
            padding-left:10px; 
        } 
        #navigation li a:hover { 
            color:#F4F4F4; 
            background:#676566; 
        } 
        #navigation li ul li a:hover { 
            color:#606060; 
            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:18px; 
            left:130px; 
            margin-top:2; 
            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:22px; 
            line-height:22px; 
            border:0px solid #fff; 
            border-width:0px 0px 0 0; 
            background:#E7E7E7; 
            padding-left:5px; 
            word-break: break-all; 
            overflow:hidden; 
        } 
#navigation li ul li a:hover{ 
color:#606060; 
            background:#E7E7E7; 
font-weight:bold; 
}     .unnamed1 {  font-family: "Microsoft Sans Serif"; font-size: 10pt; line-height: 16pt; color: #4E4D4D} 
#navigation li ul li a:hover{ 
color:#606060; 
            background:#E7E7E7; 
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="705" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
      <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 
      Serivces </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 
      Products </b> </a> 
      <ul> 
        <li> <a href="product.html">SUMAX Modules </a> </li> 
        <li> <a href="product2.html">Danfoss Solar Inverters </a> </li> 
      </ul> 
    </li> 
    <li> <a href="contact.html"> <b>Contact Us </b> </a> 
    </li> 
  </ul> 
    </table> 
    
  </div> 
</div> 
</body> 
</html> 

解决方案 »

  1.   

    标题和子菜单之间有一点点空隙
    将子菜单的位置上调一点点就可以了（18改为17）
             #navigation li ul { 
                display:none; 
                position:absolute; 
                top:17px; 
                left:0; 
                margin-top:2px; 
                width:120px; 
            } 
      

  2.   

    子菜单跟父菜单离的远了，把117行的#navigation li ul 里的top适当改小就行了
      

  3.   

    楼上的高手，我要的是子菜单跟主菜单间有一点间隙，把top:设为17px;时，虽然子菜单不会缩回去，但就没有间隙了，粘在一起了。