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

问题：
菜单和红色条分开了，要靠在一起，恳求高手帮忙。在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:131px; 
            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:12px; 
            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: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:#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:5px; 
            word-break: break-all; 
            overflow:hidden;
        } 
#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="708" 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 
      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="708" border="0" cellspacing="0" cellpadding="0" height="24">
    <tr> 
      <td background="images/bg.gif">&nbsp; </td>
    </tr>
  </table>
  <div align="left">
    <table cellspacing=0 cellpadding=0 width=100 border=0 height="14">
      <tbody> 
      <tr> 
        <td height=3><img height=1 src="SOHUﾉ忞鏆ｵｵﾀ.files/cc.gif" width=1></td>
      </tr>
      </tbody> 
    </table>
    
  </div>
</div> 
</body> 
</html> 

解决方案 »

  1.   

    代码copy之，报告楼主，除图片没看见，其他很正常，请楼主放心
      

  2.   

    我也看了下，也没发现错位的问题啊？如果错位了调下margin，padding什么的吧？俺的IE下显示米问题，难道是图片太大，DIV没有定位好，把菜单撑出去了，不过这导航菜单真难看呵呵，换个2.0的样式吧
      

  3.   

    共享了个 jsp 版 AJAX 下拉条级联至 CSDN 资源，楼主去看看
      

  4.   

    对不起，改了bgcolor了，现在可以看到红色条了，跟菜单分开了，我想合在一起，请高手帮忙。
    <!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:131px; 
                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:12px; 
                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: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:#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:5px; 
                word-break: break-all; 
                overflow:hidden; 
            } 
    #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="708" 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 
          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="708" border="0" cellspacing="0" cellpadding="0" height="24"> 
        <tr> 
          <td bgcolor=#ff0000>&nbsp; </td> 
        </tr> 
      </table> 
      <div align="left"> 
        <table cellspacing=0 cellpadding=0 width=100 border=0 height="14"> 
          <tbody> 
          <tr> 
            <td height=3> <img height=1 src="SOHUﾉ忞鏆ｵｵﾀ.files/cc.gif" width=1> </td> 
          </tr> 
          </tbody> 
        </table> 
        
      </div> 
    </div> 
    </body> 
    </html> 
      

  5.   

    楼上的高手，你共享的
    jsp 版 AJAX 下拉条级联至 CSDN 资源  ，在哪里看，找不到，能不能发邮箱啊 [email protected]
      

  6.   

    不就是红色条往上靠么~~
    <!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; 
    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:131px; 
                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:12px; 
                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: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:#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:5px; 
                word-break: break-all; 
                overflow:hidden; 
            } 
    #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="708" 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 
          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="708" border="0" cellspacing="0" cellpadding="0" height="24"> 
        <tr> 
          <td bgcolor=#ff0000>12341234</td> 
        </tr> 
      </table> 
      <div align="left"> 
        <table cellspacing=0 cellpadding=0 width=100 border=0 height="14"> 
          <tbody> 
          <tr> 
            <td height=3> <img height=1 src="SOHUﾉ忞鏆ｵｵﾀ.files/cc.gif" width=1> </td> 
          </tr> 
          </tbody> 
        </table> 
        
      </div> 
    </div> 
    </body> 
    </html> 
      

  7.   

    没firefox    有的话 自己调试  就好了 。。
      

  8.   

    jol_boy     真是太感谢了，帮了大忙了。。