CSS導航子菜單幫助...塊關閉屏幕

Question

我正在爲我兄弟的新管道公司工作，我的導航菜單有兩個問題。我從一個教程網站複製了一些CSS，並嘗試改變它以符合我的口味，但我無法弄清楚爲什麼會發生這種情況。當我將鼠標懸停在頂層菜單項（在這種情況下爲「服務」）時，子菜單應該顯示，但LI的背景延伸到屏幕之外。我曾嘗試在CSS的不同區域更改/設置寬度，但我有限的知識讓我撓頭禿頭。我有一個臨時網站，但我正在使用本地媒體查詢來測試這個新版本。

它不會讓我張貼的截圖沒有10聲譽，所以這裏是一個鏈接：http://www.sourceplumbing.com/Capture.png

的HTML：

<nav> 
    <ul> 
    <li><a href="#">About Us</a></li> 
    <li><a href="#">Services</a> 
     <ul> 
     <li><a href="#">Leak Detection</a></li> 
     <li><a href="#">Water Heaters</a></li> 
     <li><a href="#">Plumbing Fixtures</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Reviews</a></li> 
    <li><a href="#">Contact Us</a></li> 
    </ul> 
</nav> 

的CSS：

nav ul li:hover > ul { 
display: block; 
} 
nav ul { 
    width:100%; 
    height:auto; 
    min-width:550px; 
    background: -webkit-linear-gradient(#d5d5d5, #595959); /* For Safari */ 
    background: -o-linear-gradient(#d5d5d5, #595959); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(#d5d5d5, #595959); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(#d5d5d5, #595959); /* Standard syntax */ 
    -webkit-border-radius: 25px; 
    -o-border-radius: 25px; 
    -moz-border-radius: 25px; 
    border-radius: 25px; 
    font-size: 16px; 
    font-family: "Times New Roman", Times, serif; 
    font-weight: bold; 
    text-align: center; 
    text-shadow: 2px 2px 2px #cccccc; 
    text-decoration:none; 
    list-style: none; 
    position: relative; 
    display: table; 
} 
nav a:link, a:visited { 
    text-decoration: none; 
    color: #000000; 
    padding: 8px 0px 8px 8px; 
} 
nav ul:after { 
    content: ""; 
    clear:both; 
    display: block; 
} 
nav ul li { 
    display:inline-block; 
    width:auto; 
} 
nav ul li:hover a { 
    text-decoration:none; 
    color: #fff; 
} 
nav ul li a:link, a:visited { 
    display: block; 
    padding: 5px; 
    color:#000; 
    text-decoration: none; 
} 
nav ul ul { 
    background: #999; 
    border-radius: 0px; 
    padding: 0; 
    position: absolute; 
    width:150px; 
} 
nav ul ul li { 
    width:150px; 
    border-top: 1px solid #ccc; 
    position: relative; 
    display:block; 
} 
nav ul ul li a { 
    width:150px; 
    padding: 5px; 
    text-align:left; 
    color:#000; 
    display:block; 
} 
nav ul ul li a:hover { 
    color:#FFF; 
} 

我做有另一個問題，但如果我能解決這個問題，我會接下來的一個。我將不勝感激您提供的任何幫助！

Answer 1

你在找什麼是min-width: 550px;。這導致所有<ul>擴展到550px的最小寬度。

解決這個問題將解決問題。我想那是因爲nav阻止它變小，在這種情況下，你應該把它放在nav之下，而不是nav ul。

DEMO HERE

---

把min-width在正確的地方：

nav { 
    min-width: 550px; 
} 

DEMO HERE