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;입니다. 이로 인해 ALL <ul>이 550px의 최소 너비로 확장됩니다.

이 문제를 해결하면 문제가 해결됩니다. 나는 그것이 nav이 작은 것을 얻는 것을 멈추기 위해 거기에서 있었던 것이라고 생각한다, 그 경우에 당신은 nav가 아니라 nav ul의 아래에 그것을 두어야한다.

DEMO HERE

---

적절한 장소에 min-width 퍼팅은 :

nav { 
    min-width: 550px; 
} 

DEMO HERE