CSS for responsive jquery drop down menu

Question

I have tried to make a simple responsive navigation menu, it collapses fine and works great until the menu drops down when it is collapsed. The first two navigation links are on top each other and the "a href" links are also not directly behind the correct link which is a problem.

I think it is an issue with my floats in the css but I am not sure, if someone could point me in the right direction that would be great.

Heres my 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>

Heres my 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;
}

and heres my JS Fiddle

Cheers

Answer 1

You need to add the float:left in this media query

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