CSS菜單響應下拉寬度

我試圖去適應一個負責任的菜單在我的網站工作。我已經附上了我進步的jsfiddle至今：CSS菜單響應下拉寬度

jsfiddle of my progress

菜單列表項2和3下拉時，上空盤旋，其中出現的菜單：

如果屏幕寬度超過20em下拉菜單將浮動（隱藏）頁面內容。
如果頁面寬度小於20em，則下拉菜單會強制頁面內容下降，因此菜單不會隱藏內容。

這一切都可以，但是在場景b）中，我需要下拉菜單寬度爲頁面寬度的100％（如果頁面內容低於20em）。您會注意到，當您將鼠標懸停在項目2和3上時（頁面寬度小於20em）菜單很窄。他們如何製作100％的頁面寬度？

我相信需要在媒體查詢中做了一些改變：

@media only screen and (max-width: 20em) /* 320 */ {}

任何幫助表示讚賞。

來源

2013-04-30 user2335730

我不知道這是不是你正在尋找的東西，但我用這個在我的網站和它保持相同的寬度，不管瀏覽器窗口大小是什麼，當然我的是沒有一滴所以我不能保證下拉將保持相同的寬度（他們應該）

以下是我所做的，我創建了我的菜單div並將菜單放在div像這樣。

<div id="nav"> 
       <ul> 
        <li><a href="index.php">Home</a></li> 
        <li><a href="special-offers.php">Special Offers</a></li> 
        <li><a href="Partners-&-Affiliates.php">Partners & Affiliates</a></li> 
        <li><a href="contact.php">Contact Us</a></li> 
       </ul> 
      </div>

您可以編輯代碼，使其與您的代碼相同。

這裏是菜單的CSS（你又可以編輯它，使其喜歡你）

#nav { 
    width: 100%; 
    max-width:100%; 
    min-width:100%; 
    float: left; 
    margin: 0 0 1em 0; 
    padding: 0; 
    background-color: darkgoldenrod; 
    border-bottom: 1px solid #ccc; 
} 

#nav ul { 
    list-style: none; 
    width: 800px; 
    margin: 0 auto; 
    padding: 0; 
} 

#nav li { 
    float:left; 
    width:200px; 
    text-align:center; 
} 

#nav li a { 
    display: block; 
    padding: 8px 15px; 
    text-decoration: none; 
    font-weight: bold; 
    color: black; 
    border-right: 1px solid #ccc; 
} 

#nav li:first-child a { 
    border-left: 1px solid #ccc; 
} 

#nav li a:hover { 
    color: black; 
    background-color: peru; 
}

我希望這會有所幫助。

來源

2013-07-18 13:56:58

CSS菜單響應下拉寬度

回答

相關問題