0

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

除了 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>

4

1 回答 1

0

在#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;}
于 2013-07-18T20:45:03.223 回答