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

问题： 
菜单和红色条分开了，应该靠在一起的，请高手帮忙了，万分感谢 在JAVASCRIPT里发了贴，但没解决这个问题，请高手帮忙了，万分感谢 <!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> 

解决方案 »

  1.   

      你把  #navigation li ul li a:link, #navigation li ul li  a:visited { 
                display:block; 
                text-decoration:none; 
                color:#606060; 
                width:240px; 
                height:20px; 
                line-height:20px; 
                border:0px solid #fff; 
                border-width:0px 0px 0 0; 
                background:#D0CFCF; 
                padding-left:10px; 
            } 
    里面的width 值 修改为 240  看下， 我不知道是否是你要的那种效果！
      
      

  2.   

    试下把这个去掉：padding-left:10px;