排版问题。。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
   body { margin:0;padding:0;font-size:18px;line-height:1.5em;}
   ul { margin:0;padding:0;list-style:none;}
   ul li { border:solid 1px red;float:right;width:100px;height:27px;position:relative;padding:6px 0;text-align:center;}
   ul li a{ text-align:center;}
   ul li ul { width:100px;position:absolute;top:41px;left:0px;}
   ul li:hover ul {display:block;position:absolute;top:41px;left:0px;}
   #container { margin:auto;width:960px;}
   #head { width:960px;}
   #logo { height:120px;}
   #menu { width:960px;height:41px;}
</style>
</head>
<body>
<div id="container">
   <div id="head">
      <div id="logo">
  </div>
      <div id="menu">
     <ul>     
<li><a href="#">上传文件</a></li>
<li><a href="#">留言板</a>
   <ul>
      <li><a href="#">留言</a></li>
  <li><a href="#">查看留言</a></li>
   </ul>
</li>
<li><a href="#">图片</a>
   <ul>
   <li><a href="#">图片预览</a></li>
   <li><a href="#">图片浏览</a></li>
   </ul>
</li>
<li><a href="#">用户注册</a></li>
<li><a href="#">首页</a></li>
 </ul>
  </div>
   </div>
   <div id="main">
   </div>
</div>
<div id="foot">
</div>
</body>
</html>问题。“图片”下的“图片浏览”为什么不是紧贴着图片的边框，而有1px的间隙，“图片”加上边框高为41px，而我也设置了“图片浏览”的top：41px

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <style type="text/css">
         ul {margin:0;padding:0;list-style:none;}
     li { position:relative;width:100px;height:40px;border:2px solid red;float:left;}
     ul ul {position:absolute;top:44px;left:0;}  </style>
     </head>
       
     <body>
     <div>
       <ul>
       <li>a</li>
       <li>b
          <ul>
         <li>bb</li>
         <li>bb</li>
      </ul>
       </li>
       <li>a</li>
       <li>a</li>
     </div>
     </body>
    </html>
    看这个清晰一点。。