下拉菜單寬度問題

儘管付出了很多努力，但我無法制作與父級相同寬度的下拉菜單。請幫助我。 Fiddle here 下拉菜單寬度問題

#menu, #menu ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
#menu { 
    width: 958px; 
    /*margin: 60px auto;*/ 
    border: 1px solid #222; 
    background-color: #111; 
    background-image: linear-gradient(#444, #111); 

    box-shadow: 0 1px 1px #777; 
} 
#menu:before, 
#menu:after { 
    content: ""; 
    display: table; 
} 

#menu:after { 
    clear: both; 
} 

#menu { 
    zoom:1; 
} 
#menu li { 
    float: left; 
    border-right: 1px solid #222; 
    box-shadow: 1px 0 0 #444; 
    position: relative; 
} 

#menu a { 
    float: left; 
    padding: 11px 40px; 
    color: #999; 
    text-transform: uppercase; 

    text-decoration: none; 
    text-shadow: 0 1px 0 #000; 
} 

#menu li:hover > a { 
    color: #fafafa; 
} 

*html #menu li a:hover { /* IE6 only */ 
    color: #fafafa; 
} 
#menu ul { 
    margin: 20px 0 0 0; 
    _margin: 0; /*IE6 only*/ 
    opacity: 0; 
    visibility: hidden; 
    position: absolute; 
    top: 38px; 
    left: 0; 
    z-index: 1000000;  
    background: #444;  
    background: linear-gradient(#444, #111); 
    box-shadow: 0 -1px 0 rgba(255,255,255,.3);  

    transition: all .2s ease-in-out; 
} 

#menu li:hover > ul { 
    opacity: 1; 
    visibility: visible; 
    margin: 0; 
} 

#menu ul ul { 
    top: 0; 
    left: 150px; 
    margin: 0 0 0 20px; 


    _margin: 0; /*IE6 only*/ 
    box-shadow: -1px 0 0 rgba(255,255,255,.3);   
} 

#menu ul li { 
    float: none; 
    display: block; 
    border: 0; 
    _line-height: 0; /*IE6 only*/ 
    box-shadow: 0 1px 0 #111, 0 2px 0 #666; 
} 

#menu ul li:last-child { 
    box-shadow: none;  
} 

#menu ul a {  
    padding: 10px; 
    width: 130px; 
    _height: 10px; /*IE6 only*/ 
    display: block; 
    white-space: nowrap; 
    float: none; 
    text-transform: none; 
} 

#menu ul a:hover { 
    background-color: #000000; 
} 
#menu ul li:first-child > a { 
    /*border-radius: 3px 3px 0 0;*/ 
    padding: 11px 13px; 
} 

#menu ul li:first-child > a:after { 
    content: ''; 
    position: absolute; 
    left: 40px; 
    top: -6px; 
} 

#menu ul ul li:first-child a:after { 
    left: -6px; 
    top: 50%; 
    margin-top: -6px; 
    border-left: 0;  



} 

#menu ul li:first-child a:hover:after { 
    border-bottom-color: #000; 
} 

#menu ul ul li:first-child a:hover:after { 
    border-right-color: #000; 
    border-bottom-color: transparent;  
} 

#menu ul li:last-child > a { 
    /*border-radius: 0 0 3px 3px*/; 
    padding: 11px 20px; 

} 
 

HTML: 

<ul id="menu"> 

                  <li><a href="#">About </a></li> 

                  <li><a href="#">Programmes</a> 
                  <ul> 
                   <li><a href="#">Undergraduate</a></li> 
                   <li><a href="#">Postgraduate</a></li> 
                   </ul> 
                  </li> 
                  <li><a href="#">Academics</a></li> 
                  <li><a href="#">Research</a></li> 
                  <li><a href="#">Facilities</a></li> 
                  <li></li>    
             </ul>

來源

2012-10-02 Fahad Uddin

您coud使用Twitter的引導 - > http://twitter.github.com/bootstrap/components.html#navbar –

有幫助，張貼的示例代碼時，去除所有多餘的非必要造型標記 - 在這個JS小提琴中有很多需要處理的東西。（這也有助於您自己調試代碼） – quoo

在下拉菜單的UI元素添加「右：0」（或-1px你的情況考慮邊界）：

#menu ul { 
margin: 20px 0 0 0; 
_margin: 0; /*IE6 only*/ 
opacity: 0; 
visibility: hidden; 
position: absolute; 
top: 38px; 
left: 0; 
right: -1px /* <-- add this */ 
z-index: 1000000;  
background: #444;  
background: linear-gradient(#444, #111); 
box-shadow: 0 -1px 0 rgba(255,255,255,.3);  

transition: all .2s ease-in-out; 
}

然後刪除width屬性一個元素：

#menu ul a {  
padding: 10px; 
_height: 10px; /*IE6 only*/ 
display: block; 
white-space: nowrap; 
float: none; 
text-transform: none; 
}

這將獨立於菜單容器寬度工作。

工作撥弄http://jsfiddle.net/chopsticks/XLxJk/4/

來源

2012-10-02 18:09:02 Chopsticks

謝謝。這工作得很好。我仍然遇到一個小問題，那就是當我移動到父級的下拉菜單中時，下拉菜單變得不可見。請看看 –

它在小提琴中工作正常，但不是在真正的代碼:( –

嘗試我的然後。寬度：100％應該工作。 –

#menu ul a {  
padding: 10px; 
width: 150px; 
_height: 10px; /*IE6 only*/ 
display: block; 
white-space: nowrap; 
float: none; 
text-transform: none; 
} 
#menu ul li:first-child > a { 
padding: 11px 20px; 
}

DEMO

來源

2012-10-02 17:54:13 Afshin

因此通過定位你的下拉菜單中絕對你是從流量中刪除。這會導致它不再將其大小設置爲其父元素的寬度。您需要明確設置寬度，通過js顯式設置寬度（如果您希望基於菜單項包含的文本來調整菜單項的大小），或者找出如何以不同的方式定位寬度。

來源

2012-10-02 17:55:16 quoo

這個怎麼樣？

只需在#menu ul中將寬度設置爲100％，並且您有相同大小的下拉菜單。

http://jsfiddle.net/XLxJk/3/

來源

2012-10-02 18:01:36

謝謝。你的代碼也不錯:) –