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

回答

相關問題