用于响应式jQuery下拉菜单的CSS

Question

我试图制作一个简单的响应式导航菜单，它折叠良好，并且工作良好，直到菜单在折叠时下降为止。前两个导航链接彼此重叠，并且“a href”链接也不直接位于正确的链接之后，这是一个问题。

我认为这是我的浮动在CSS中的问题，但我不知道，如果有人能指出我在正确的方向，这将是伟大的。

我的继承人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> 

继承人我CSS

.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; 
} 

和我的继承人JS Fiddle

干杯

Answer 1

您需要添加浮动：留在这个媒体查询

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