Wordpress CSS Media-query causes sub menu to appear in line with main menu

Question

I'm new to CSS so am trying my best to solve this problem, however I seem to be stuck.

The nav bar is working perfectly fine on desktop, however once the screen is resized and the drop down menu is activated, the sub menu shows in line with the main menu. Have a look at the jsfiddle at:

https://jsfiddle.net/shajar93/q3xg37bs/3/

The sub menu works fine without the @media CSS, CSS for the navigation is:

#navigation {
    text-align: center;
    background: #464646;
    min-height: 40px;
    width: 100%;
    display: inline-block;
  }

  #navigation .btn-navbar {
    background: url('img/nav-collapse.png') no-repeat;
    border: none;
    border-radius: 0;
    box-shadow: none;
    height: 40px;
    margin: 0;
    padding: 0;
    width: 53px;
  }

  #navigation .caret {
    border-bottom-color: #fff;
    border-top-color: #fff;
    margin-top: 10px;
    margin-left: 5px;
  }

  #navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
  }

  #navigation ul li {
    display: inline-block;
    float: left;
    position: relative;
  }

  #navigation ul li.active {
    background: #fff;
  }

  #navigation ul li:first-child a {
    border-left: 1px solid #333;
  }

  #navigation ul li a {
    border-right: 1px solid #333;
    color: #fff;
    display: block;
    padding: 10px 18px;
    text-decoration: none;
  }

  #navigation ul li.active a {
    color: #333;
  }

  #navigation ul li:hover a,
  #navigation ul li a:hover {
    background: #fff;
    color: #333;
  }

  #navigation ul li.active .caret,
  #navigation ul li:hover .caret,
  #navigation ul li a:hover .caret {
    border-bottom-color: #333;
    border-top-color: #333;
  }

  #navigation ul li:hover ul {
    left: -4px;
  }

  #navigation ul li ul {
    background: #FFF;
    border-bottom: 4px solid #EEE;
    border-right: 4px solid #EEE;
    border-left: 4px solid #EEE;
    left: -999em;
    width: 220px;
    padding-bottom: 5px;
    position: absolute;
    z-index: 2000;
  }

  #navigation ul li ul li {
    width: 100%;
  }

  #navigation ul li ul li a {
    border: none !important;
    color: #333333;
  }

The media CSS is:

 @media (max-width: 767px) {
    body {
      padding-left: 0;
      padding-right: 0;
    }
    #navigation .container,
    #breadcrumbs .container {
      padding: 0 20px;
    }
    #content {
      padding: 20px 20px 10px;
    }
    .container {
      width: 100%;
    }
    #masthead,
    #masthead .container {
      height: auto;
    }
    #masthead .logo {
      margin-bottom: 50px;
      width: 100%;
    }
    /*.home #masthead,
.home #masthead .container {
    height: 160px;
}

.home #masthead .logo {
    margin-top: 50px;
}*/
    #navigation .container {
      padding: 0;
    }
    #navigation .btn-navbar {
      margin-left: 10px;
    }
    .left-content {
      padding: 0 10px;
      width: 100%;
    }
    .right-content {
      margin-top: 20px;
      margin-left: 0;
      width: 100%;
    }
    .home .widget h3 {
      background: #485566;
      border: 0;
      color: #FFF;
      line-height: normal;
      margin: 0;
      padding: 10px;
    }
    .home .widget_newsletter_widget h3 {
      background: none;
      border-bottom: 1px solid #EEE;
      color: #4B7FBF;
      margin-bottom: 10px;
      padding-top: 0;
      padding-left: 0;
    }
    #affiliations,
    #footer,
    #footer-bottom {
      padding-right: 20px;
      padding-left: 20px;
    }
    #affiliations p {
      width: 80%;
    }
    #affiliations .control-group {
      display: block;
    }
    #affiliations input,
    #affiliations button {
      display: block;
      margin: 0 auto 10px;
    }
    #affiliations input {
      width: 80%;
    }
  }

  @media (max-width: 480px) {
    .widget {
      margin-left: 0 !important;
      padding-left: 0;
      padding-right: 0;
      width: 100%;
    }
    .widget ul li img {
      margin-left: 0;
    }
  }

  @media (min-width: 767px) and (max-width: 1080px) {
    .container,
    #masthead .logo {
      width: 680px;
    }
    #masthead,
    #masthead .container {
      height: 180px;
    }
    /*.home #masthead,
.home #masthead .container {
    height: 210px;
}

.home #masthead .logo {
    margin-top: 70px;
}*/
    .row-fluid [class*="span"] {
      margin-left: 2.5%;
    }
  }

  @media (max-width: 979px) {
    #navigation ul {
      float: left;
      margin-bottom: 20px;
      width: 100%;
      display: block;
    }
    #navigation ul li {
      display: block;
      width: 100%;
    }
    #navigation ul li:first-child a {
      border-left: none;
    }
    #navigation ul li.active,
    #navigation ul li.active a,
    #navigation ul li:hover,
    #navigation ul li:hover a,
    #navigation ul li:hover ul li,
    #navigation ul li:hover ul li a {
      background: none;
      color: #fff;
    }
    #navigation ul li .caret {
      border-bottom-color: #fff;
      border-top-color: #fff;
      margin-top: 10px;
      margin-left: 5px;
    }
    #navigation ul li a {
      border-right: 0;
      border-bottom: 1px solid #333;
    }
    #navigation ul li ul {
      background: none;
      border: 0;
      left: auto;
      margin: 0;
      padding: 0;
      position: static;
      width: 100%;
    }
    #navigation ul li ul li a {
      border-bottom: 1px solid #333 !important;
      color: #FFF;
    }
  }

  @media (min-width: 767px) {
    #navigation .btn-navbar {
      display: none;
    }
  }

  @media (min-width: 1px) {
    .right-content {
      width: 250px;
    }
  }

The site is running a child theme of twentytwelve.

Any and all help will be appreciated.

Thanks

Answer 1

Here you go.

#navigation ul li ul.sub-menu {
  display: none;
}
@media screen and (min-width: 979px) {
  #navigation ul li ul.sub-menu {
    display: block;
  }
}

Updated fiddle.