반응 형 jquery 드롭 다운 메뉴 용 CSS

Question

간단한 반응 형 탐색 메뉴를 만들려고했는데 축소되었을 때 메뉴가 드롭 다운 될 때까지 잘 작동하고 훌륭하게 작동합니다. 첫 번째 네비게이션 링크는 서로 위에 있고 "a href"링크는 문제의 올바른 링크 바로 뒤에 있지 않습니다.

나는 CSS에서 내 수레에 문제가 있다고 생각하지만, 누군가가 올바른 방향으로 나를 가리킬 수 있다면 그것은 좋을 것입니다.

Heres는 내 html로

<div class="container"> 
    <header> 
    <nav class="nav"> 
     <div class="nav-head"> 
      <div class="nav-logo"> 
       <img class="responsive-img" src="http://placehold.it/350x231" alt="Country View Logo"> 
      </div> 
      <div class="main-text"> 
       <h1>Title</h1> 
      </div>  
      <div class="sub-text"> 
       <h2>"Sub Title"</h2> 
      </div> 
     </div> 
     <div class="nav-links"> 
      <a href="#" class="three-lines-menu"><b class="lines">&#9776;</b> Menu</a> 
      <ul class="js-menu"> 
       <li><a href="#">Link</a></li> 
       <li><a href="testimonials.html">Link</a></li> 
       <li><a href="careers.html">Link</a></li> 
       <li><a href="links.html">Link</a></li> 
       <li><a href="contact-us.html">Link</a></li> 
      </ul> 
     </div> 
    </nav> 
    </header> 
    <section class="clear content-block"> 
    <h1>Title</h1> 
    <h2>"Sub-Title"</h2> 
    </section>       
</div> 

.container{ 
    background-color: #fff; 
    width: 100%; 
    max-width: 1000px; 
    text-align: center; 
    margin: auto; 
} 

.nav { 
    width: 100%; 
    height: 100%; 
    font-size: 20px; 
    color: #556b2f; 
} 

.nav-head{ 
    padding: 10px 0; 
    padding-bottom: 15px; 
} 

.nav-logo { 
    float: left; 
    width: 35%; 
    text-align: left; 
    max-width:90%; 
    height:auto; 
    display:block; 
    margin:0 auto; 
} 

.responsive-img{ 
    width:100% !important; 
    height:100% !important; 
    display:block; 
} 

.nav-contact a { 
    color: #556b2f; 
    text-decoration: none; 
} 

.nav-links { 
    margin: 30px 0; 
    clear: both; 
    width: 100%; 
    background-color: #556b2f; 
    height: 50px; 
} 

.nav-links ul { 
    width: 100%; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

    .nav-links ul li { 
     width: 20%; 
     float: left; 
     height: 50px; 
    } 

     .nav-links ul li a { 
      display: block; 
      width: 100%; 
      color: #ffffff; 
       padding-top: 15px; 
      text-decoration: none; 
     } 

    .nav-links ul li:hover, .nav-links ul li:active { 
     background-color: #7b9155; 
    } 

    .three-lines-menu { 
    background-color: #556b2f; 
    color: #fff; 
    font-size: 24px; 
    text-decoration: none; 
    float: right; 
    width: 100%; 
    text-align: right; 
    display: none; 
    height: inherit; 
    } 

    .lines { 
    color: #7b9155; 
    } 

    @media screen and (max-width: 767px) { 

    .three-lines-menu { 
     display: block; 
     padding-top: 12px; 
     padding-right: 12px; 
     padding-bottom: 12px; 
    } 

    .nav-links { 
     margin: 0px; 
     min-height: 45px; 
     height: auto; 

    } 
     .nav-links ul { 
      margin: 0px; 
      padding-bottom: 15px; 
      height: 250px; 
    } 
     .nav-links ul li { 
      width: 100%; 
      float: none; 
      height: 40px; 
      background-color: #556b2f; 
     } 

      .nav-links ul li a { 
       display: block; 
       width: 100%; 
      } 



    .js-menu { 
     display: none; 
    } 

.js-menu-responsive { 
     display: block; 
    } 
} 

.clear { 
    clear: both; 
} 

.content-block{ 
    width: 900px; 
    margin: auto; 
    clear: both; 
    padding: 0 15px; 
} 

하고를 heres 내 JS Fiddle

건배

당신은 플로트를 추가 할 필요가

Answer 1

가 Heres는 내 CSS :이 미디어 쿼리

에 남아

@media screen and (max-width: 767px) { 
.nav-links ul li {float:left} 
}