브라우저 크기를 줄이면 탐색 메뉴가 표시되지 않습니다.

Question

응답 형 사이트를 만드는 중입니다.이 사이트에는 드롭 다운 메뉴가 있습니다. 크기를 900px로 낮추면 메뉴가 유지되지만 브라우저의 왼쪽으로 계속 이동합니다. 나는 약간의 왼쪽 패딩을주었습니다. 벽에서 떨어지면 600px에 도달하고 목록 블록 뷰로 들어가고 드롭 다운 상자를 숨 깁니다. 기본적으로 600px와 900px 사이의 드롭 다운 메뉴를 유지하는 방법을 찾아서 각각의 장소에 여전히 나타나도록해야합니다. 포함 a screen shot to show what's happening.

편집 : 나는 당신이 볼 수 있듯이 나는 엉망하지 않은 fiddle

그리고 지금 내 코드

HTML5

<nav> 
    <nav class="nav-wrapper"> 
     <ul> 
      <li><a href="index.html">Home</a> 
      </li> 
      <li><a href="appliances.html">Appliances</a> 
      </li> 
      <li><a href="Electronics/index.html">Electronics</a> 

       <ul> 
        <li><a href="Electronics/computers.html">Computers</a></li> 
        <li><a href="Electronics/game_systems.html">Game Systems</a></li> 
        <li><a href="Electronics/televisions.html">Televisions</a></li> 
       </ul> 
      </li> 
      <li><a href="Furniture/index.html">Furniture</a> 

       <ul> 
        <li><a href="Furniture/bedroom.html">Bedroom</a></li> 
        <li><a href="Furniture/dining_room.html">Dining Room</a></li> 
        <li><a href="Furniture/living_room.html">Living Room</a></li> 
       </ul> 
      </li> 
      <li><a href="location.html">Location</a> 
      </li> 
     </ul> 
    </nav> 
</nav> 

CSS3

/*Default CSS*/ 
.main-header nav ul ul { 
    display: none; 
} 

.main-header nav ul li:hover > ul { 
    display: block; 
} 

.main-header nav ul { 
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); 
    padding: 0 20px; 
    border-radius: 10px; 
    list-style: none; 
    position: relative; 
    display: inline-table; 
} 

.main-header nav ul:after { 
    content:""; 
    clear: both; 
    display: block; 
} 

.main-header nav ul li { 
    float: left; 
} 

.main-header nav ul li:hover { 
    background: #4b545f; 
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%); 
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
    background: -webkit-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
} 

.main-header nav ul li:hover a { 
    color: #fff; 
} 

.main-header nav ul li a { 
    display: block; 
    padding: 25px 40px; 
    color: #757575; 
    text-decoration: none; 
} 

.main-header nav ul ul { 
    background: #5f6975; 
    border-radius: 0px; 
    padding: 0; 
    position: absolute; 
    top: 100%; 
} 

.main-header nav ul ul li { 
    float: none; 
    border-top: 1px solid #6b727c; 
    border-bottom: 1px solid #575f6a; 
    position: relative; 
} 

.main-header nav ul ul li a { 
    padding: 15px 40px; 
    color: #fff; 
} 

.main-header nav ul ul li a:hover { 
    background: #4b545f; 
} 

    /*Between 600px and 900px*/ 

.main-header nav ul { 
    position: relative; 
    margin: 0 auto; 
    left: 10%; 
} 

.main-header nav ul ul { 
    position: absolute; 
    top: 100%; 
} 

했다 많은 것들이 필요하다고 생각합니다. 이 두 줄. 누구든지 나를 도울 수 있다면 그것은 많이 감사 할 것입니다.

Answer 1

절대 위치 지정된 드롭 다운

.main-header nav ul li { 
    float: left; 
    position: relative; 
} 

http://jsfiddle.net/UhEk4/2/

는 분명히 더 많은 작업 위치를 조정하기 위해 수행 할 수있다 상대 위치 지정된 컨테이너의 내부에 있어야하지만 당신은에서를 취할 수 있어야한다 여기