css导航菜单下拉菜单背景显示宽度超过设置宽度只有在ie8

这是我的第一篇文章，我一直在研究这个问题两天了，但无法找到类似的东西，我在我的智慧结束了它。css导航菜单下拉菜单背景显示宽度超过设置宽度只有在ie8

除IE8以外，所有测试都能正常工作。在那里，我的css下拉菜单有一个背景（在主菜单中设置为图像），比主要导航菜单的宽度设置宽。每个链接都有自己的背景，这是整个下拉菜单的背景。即使将它移动到-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>

来源

2013-07-05 user2552176

小提琴：http://jsfiddle.net/LL6QY/ – stackErr

我们无法看到你的背景图像，你能告诉我们他们的维度吗？ – stackErr

感谢您的回复。是不是总是这样，当你最终寻求帮助时，你找到了答案！我添加了边距：0填充：0到#menu ul并且背景消失。我必须更改悬停显示，将其从右侧的-20px移动到20px下的#menu li：hover ul – user2552176

增加保证金：0填充：0到#menu UL解决问题，通过改变#menu李改变了下拉的位置：悬停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-18 20:45:03 user2552176

css导航菜单下拉菜单背景显示宽度超过设置宽度只有在ie8

回答

相关问题