css 导航菜单下拉背景仅在 ie8 中显示比设置宽度宽

Question

这是我的第一篇文章，我已经研究这个问题两天了，但找不到任何类似的东西，我束手无策。

除 IE8 外，在我的所有测试中一切正常。在那里，我的 css 下拉菜单的背景(在主菜单中设置为图像)比主导航菜单的设置 128px 宽度更宽。每个链接都有自己的背景，这是整个下拉菜单的背景。即使将它移到 -40px 上以与上面的链接对齐仍然给我额外的宽度。我尝试了很多修复，但似乎没有任何效果。我希望这里的综合专业知识能够解决这个问题!我不能张贴图片，因为我在这里没有足够的声誉，抱歉。提前致谢....

这是我的样式表中的代码，后面是 HTML5 代码:

#menu{list-style:none; font-size:12px; font-weight:600; float:left; width:100%;
  margin:0px auto;position:relative; z-index:5;text-align:center;}
#menu li{float:left; margin-right:2px; position:relative;}
#menu a {display:block; background:#202020 url('images/bgmen.jpg') repeat-x;
  width:128px; height:30px; line-height:30px; color:#fff; text-decoration:none;}
#menu a:hover{background:#202020 url('images/bgmenlt.jpg') repeat-x; color:#000;}
/* dropdown*/
#menu ul{background:#000 url('images/bgmen.jpg') repeat-x; background:rgba(255,255,255,0);
  list-style:none; position:absolute; left:-9999px;} 
#menu ul li{padding-top:1px; float:none;}
#menu ul a{white-space:nowrap;}
#menu li:hover ul{left:-20px;}
#menu li:hover a{background:#202020 url('images/bgmenlt.jpg') repeat-x;} 
#menu li:hover ul a{background:#202020 url('images/bgmen.jpg') repeat-x;}
#menu li:hover ul li a:hover{background:#000 url('images/bgmenlt.jpg') repeat-x;}

<ul id="menu">
  <li><a href="http://www.mywebpage.com" target="_self">HOME</a></li>
  <li><a href="http://www.mywebpage.com/bio.shtml" target="_self">BIO</a></li>
  <li><a href="http://www.mywebpage.com/news.shtml" target="_self">NEWS</a></li>
  <li><a href="http://www.mywebpage.com/gallery.shtml" target="_self">GALLERY</a></li>
  <li><a href="#">TEST</a>
    <ul>
      <li><a href="http://www.mywebpage.com/name1.shtml" target="_blank">test</a></li>
      <li><a href="http://www.mywebpage.com/name2.shtml" target="_blank">test</a></li>
    </ul>
  </li>
  <li><a href="#">CONNECT</a>
    <ul>
      <li><a href="https://www.facebook.com/mywebpage" target="_blank"> <img src="images/fb.jpg" width="20" height="20" alt="" title="" /> Facebook</a></li>
      <li><a href="https://twitter.com/mywebpage" target="_blank"> <img src="images/twitter.jpg" width="20" height="20" alt="" title="" /> Twitter</a></li>
      <li><a href="http://www.mywebpage.com/contact.shtml" target="_self">Contact</a></li>
    </ul>
  </li>
  <li><a href="http://www.mywebpage.com/char.shtml" target="_self">CHAR</a></li>
</ul>

Answer 1

在 #menu ul 中添加 margin:0 padding:0 解决了这个问题，并通过如下更改 #menu li:hover ul 来更改下拉列表的位置:

    #menu ul{
    background:#000 url('images/bgmen.jpg') repeat-x; 
    background:rgba(255,255,255,0); 
    list-style:none; position:absolute; 
    left:-9999px;
    margin:0;
    padding:0;} 
    #menu li:hover ul{left:20px;}