CSS 응답 메뉴 드롭 다운 폭

Question

내 사이트에서 반응 형 메뉴를 적용하려고합니다. 나는 지금까지 내 진보의 jsfiddle을 첨부했습니다 : 화면 너비가 20em 이상

1. 경우

   jsfiddle of my progress

   메뉴 목록 항목 2와 3를 통해 공중 선회 할 때 나타나는 드롭 다운 메뉴를 가지고 드롭 다운은 페이지 내용 위에 떠있게됩니다.

2. 페이지 폭이 20em 미만인 경우 메뉴가 페이지 내용을 숨기지 않도록 드롭 다운이 페이지 내용을 강제로 내립니다.

시나리오 b)에서는 페이지 크기가 20em 미만인 경우 드롭 다운 메뉴 너비를 페이지 너비의 100 %로 설정해야합니다. 항목 2와 3 (페이지 너비가 20,000 미만인 경우) 위로 마우스를 가져 가면 메뉴가 좁아집니다. 어떻게 100 % 페이지 너비로 만들 수 있습니까?

내가 몇 가지 변화가 미디어 쿼리를 만들 필요가 가정 :

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

어떤 도움에 감사드립니다.

Answer 1

이게 당신이 찾고있는 것인지 모르겠지만, 내 사이트에서 이것을 사용했고 브라우저 창 크기에 상관없이 같은 너비를 유지합니다. 물론 내 것이 드롭이 아닙니다. 드롭 다운 표시 줄이 동일 너비를 유지할 것이라고 보장 할 수는 없습니다.

내 메뉴는 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; 
} 

입니다.