Отзывчивое и многоуровневое меню

Question

Добрый день, у меня есть следующее меню, над которым я работаю довольно долгое время. Некоторые части основаны на учебнике, которое я нашел в Интернете, а другие написаны с нуля.

Live Example

я тестировал только на хроме до сих пор, и я не уверен, что в других браузерах, но при изменении размера браузера для < 480px, кнопка меню будет отображаться, а затем, если я хочу, чтобы нажать на документы в подменю не открывается, и я не могу найти решение этого.

HTML

<div class="navbar fixed-top navbar-theme-blue-marina"> 
    <div class="inner-navbar"> 
     <a href="#" class="brand pull-left">Text Here</a> 
     <div class="page"> 
     <nav id="menu" class="nav" role="navigation"> 
      <ul> 
      <li><a href="#" id="menutoggle" class="navtoggle" title=""><span><i aria-hidden="true" class="icon-home"></i></span>Home</a> 
      </li> 
      <li class="inactive-dropdown" id="dropdown" > 
       <a href="#" title=""><span><i aria-hidden="true" class="icon-home"></i></span>Docs</a> 
       <ul class="nav"> 
       <li> 
        <a href="#" title=""><span><i aria-hidden="true" class="icon-code"></i></span>ssss</a></li> 
       <li> 
        <a href="#" title=""><span><i aria-hidden="true" class="icon-qrcode"></i></span>Portfolio</a></li> 
       <li> 
        <a href="#" title=""><span><i aria-hidden="true" class="icon-print"></i></span>Blog</a> </li> 
       <li> 
        <a href="#" title=""><span><i aria-hidden="true" class="icon-heart"></i></span>The team</a></li> 
       <li><a href="#" title=""><span><i aria-hidden="true" class="icon-envelope"></span></i>Contact</a></li> 
       </ul> 
      </li> 
      <li><a href="#" title=""><span><i aria-hidden="true" class="icon-qrcode"></i></span>Portfolio</a></li> 
      <li><a href="#" title=""><span><i aria-hidden="true" class="icon-print"></i></span>Blog</a> </li> 
      <li><a href="#" title=""><span><i aria-hidden="true" class="icon-heart"></i></span>The team</a></li> 
      <li><a href="#" title=""><span><i aria-hidden="true" class="icon-envelope"></span></i>Contact</a></li> 
      </ul> 
     </nav> 
     </div> 
    </div> 

CSS

.button { 
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
    display: block; 
    color: #ffffff; 
    text-decoration: none; 
    text-align: center; 
    font-size: 18px; 
    text-transform: uppercase; 
    background: #428bca; 
    border: 0px none; 
    outline: 0px none; 
} 
.button:hover { 
    background: #d9534f; 
} 
.button:active { 
    background: #5bc0de; 
} 
.button-group { 
    position: relative; 
    display: inline-block; 
    *display: inline; 
    *zoom: 1; 
    font-size: 16px; 
    vertical-align: middle; 
    white-space: nowrap; 
    *margin-left: .3em; 
} 
.button-group:first-child { 
    *margin-left: 0; 
} 
.button-group:first-child { 
    *margin-left: 0; 
} 
.button-group + .button-group { 
    margin-left: 5px; 
} 
.button-group, 
.button { 
    display: inline-block; 
} 
.input-append .input-prepend { 
    width: 25px; 
} 
.add-on { 
    float: left; 
    border-width: 1px 0px 1px 1px; 
    border-color: #ccc; 
    border-style: solid; 
    padding: 7px; 
} 
body { 
    background-color: #fff; 
} 
.navbar [class^="icon-"], 
[class*=" icon-"] { 
    display: block; 
    font-size: 2em; 
    line-height: 24px; 
    line-height: 1.5rem; 
    vertical-align: middle; 
    background-repeat: no-repeat; 
} 
.navbar { 
    background-color: #4d4d4d; 
    width: 100%; 
    -webkit-box-shadow: 0 0 0.9em #555555; 
    box-shadow: 0 0 0.9em #555555; 
} 
.inner-navbar .brand { 
    color: #fff; 
    font-size: 36px; 
    font-size: 2.25rem; 
    line-height: 1.5em; 
    padding-left: 24px; 
    padding-left: 1.5rem; 
    padding-right: 24px; 
    padding-right: 1.5rem; 
    vertical-align: middle; 
    font-weight: bold; 
    text-align: center; 
    display: block; 
    font-family: Calibri, Arial, Helvetica, sans-serif; 
} 
.inner-navbar .brand sub, 
sup { 
    padding-left: 5px; 
    padding-left: 0.3125rem; 
    font-size: .5em; 
} 
.inner-navbar .brand:hover { 
    color: #191919; 
    text-decoration: none; 
    background-color: #1c87ad; 
    -webkit-transition: background 0.6s ease-in-out; 
    -moz-transition: background 0.6s ease-in-out; 
    -o-transition: background 0.6s ease-in-out; 
    transition: background 0.6s ease-in-out; 
} 
.navbar-inner { 
    width: 100%; 
} 
.navbar-theme-blue-marina { 
    background: #2aa4cf; 
} 
.inner-navbar nav { 
    display: block; 
    font-size: 14px; 
    font-size: 0.875rem; 
    font-family: Arial, sans-serif; 
    z-index: 1000; 
} 
.inner-navbar nav button#menutoggle { 
    display: none; 
} 
.inner-navbar nav ul { 
    padding: 0; 
    margin: 0 auto; 
    text-align: center; 
} 
.inner-navbar nav li { 
    display: block; 
    float: left; 
    width: 130px; 
    width: 8.125rem; 
} 
.inner-navbar nav li:first-child, 
a { 
    border-left: 0; 
} 
.inner-navbar nav a { 
    padding: 5px; 
    padding: 0.3125rem; 
    color: #fff; 
    display: block; 
    text-align: center; 
    text-decoration: none; 
    line-height: 1.5em; 
    -webkit-transition: background 0.6s ease-in-out; 
    -moz-transition: background 0.6s ease-in-out; 
    -o-transition: background 0.6s ease-in-out; 
    transition: background 0.6s ease-in-out; 
} 
.inner-navbar nav a:hover { 
    background: #1c87ad; 
    -webkit-transition: background 0.6s ease-in-out; 
    -moz-transition: background 0.6s ease-in-out; 
    -o-transition: background 0.6s ease-in-out; 
    transition: background 0.6s ease-in-out; 
} 
.inner-navbar nav a:active, 
nav a.selected, 
nav a:active:hover, 
nav a.selected:hover { 
    background: #08607f; 
} 
.inactive-dropdown ul { 
    display: none; 
} 
.active-dropdown ul { 
    display: block; 
    position: absolute; 
} 
.active-dropdown { 
    background: #1f2024; 
    -webkit-border-radius: 0 0 5px 5px; 
    -moz-border-radius: 0 0 5px 5px; 
    border-radius: 0 0 5px 5px; 
    list-style: none; 
    -webkit-transition: opacity .25s ease .1s; 
    -moz-transition: opacity .25s ease .1s; 
    -o-transition: opacity .25s ease .1s; 
    -ms-transition: opacity .25s ease .1s; 
    transition: opacity .25s ease .1s; 
} 
.active-dropdown li { 
    display: list-item; 
    float: left; 
    clear: both; 
    background-color: #2aa4cf; 
    width: 160px; 
    position: relative; 
    -webkit-transition: height .25s ease .1s; 
    -moz-transition: height .25s ease .1s; 
    -o-transition: height .25s ease .1s; 
    -ms-transition: height .25s ease .1s; 
    transition: height .25s ease .1s; 
} 
.active-dropdown li a { 
    display: block; 
    width: 100%; 
    color: #fff; 
    display: inline-block; 
    text-align: left; 
    text-decoration: none; 
    line-height: 1.5em; 
    padding-left: 1.5em; 
    padding-right: 1.5em; 
} 
/* ------------------------------ RESPONSIVE STYLES ----------------------------------------------------*/ 
@media screen and (max-width: 1024px) { 

} 
/*Styles for screen 768px and lower*/ 
@media screen and (max-width: 768px) { 
    .inner-navbar nav { 
    height: auto; 
    position: relative; 
    top: 0; 
    left: 0; 
    z-index: 1000; 
    } 
    .inner-navbar nav ul { 
    float: none; 
    width: 100%; 
    display: block; 
    height: auto; 
    } 
    .inner-navbar .brand { 
    display: none; 
    } 
    .inner-navbar nav li { 
    width: 50%; 
    float: left; 
    position: relative; 
    border-left: 0 solid #666; 
    } 
    .inner-navbar nav li a { 
    border-left: 0; 
    padding: 10px 0; 
    background: #383838; 
    } 
    .inner-navbar nav li a:hover { 
    background: #636363; 
    } 
    .inner-navbar nav a { 
    text-align: left; 
    width: 100%; 
    text-indent: 25px; 
    } 
} 
@media only screen and (max-width: 600px) { 

} 
/*Styles for screen 515px and lower*/ 
@media only screen and (max-width: 480px) { 
    .inner-navbar nav { 
    border-bottom: 0; 
    } 
    .inner-navbar nav ul { 
    display: none; 
    height: auto; 
    } 
    .inner-navbar nav li { 
    width: 100%; 
    float: none; 
    position: relative; 
    border-left: 0 solid #666; 
    } 
    .inner-navbar nav li a { 
    border-bottom: 1px solid #0c0a0d; 
    } 
    .inner-navbar nav button#menutoggle { 
    display: block; 
    background-color: #242424; 
    width: 100%; 
    position: relative; 
    } 
    .inner-navbar nav button#menutoggle { 
    zoom: 1; 
    } 
    .inner-navbar nav button#menutoggle:before { 
    content: ''; 
    /* 1 */ 

    display: block; 
    /* 2 */ 

    } 
    .inner-navbar nav button#menutoggle:after { 
    content: ''; 
    display: table; 
    clear: both; 
    } 
    /* When JavaScript is enabled, we hide the menu */ 
    .js .inner-navbar nav ul { 
    max-height: 0; 
    overflow: hidden; 
    display: block; 
    } 
    /* Displaying the menu when the user has clicked on the button */ 
    .js .inner-navbar nav .active + ul { 
    max-height: 30em; 
    -webkit-transition: max-height 0.4s; 
    -moz-transition: max-height 0.4s; 
    -o-transition: max-height 0.4s; 
    transition: max-height 0.4s; 
    } 
} 
/*Smartphone*/ 
@media only screen and (max-width: 320px) { 
    .inner-navbar nav li { 
    display: block; 
    float: none; 
    width: 100%; 
    } 
    .inner-navbar nav li a { 
    border-bottom: 1px solid #0c0a0d; 
    } 
    .inner-navbar .brand { 
    color: #fff; 
    font-size: 50px; 
    font-size: 3.125rem; 
    line-height: 1.5em; 
    font-weight: bold; 
    text-align: center; 
    margin: 0 auto; 
    float: none; 
    display: block; 
    font-family: Calibri, Arial, Helvetica, sans-serif; 
    } 
    .inner-navbar .brand sub, 
    sup { 
    padding-left: .3em; 
    font-size: .5em; 
    } 
    .inner-navbar .brand:hover { 
    color: #191919; 
    text-decoration: none; 
    background-color: #1c87ad; 
    -webkit-transition: background 0.6s ease-in-out; 
    -moz-transition: background 0.6s ease-in-out; 
    -o-transition: background 0.6s ease-in-out; 
    transition: background 0.6s ease-in-out; 
    } 
} 
/* RETINA */ 
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 

} 

JavaScript

(function(root) { 

    var elements = {}; 

    function s(id) { 
     if (!elements[id]) { 
      elements[id] = document.getElementById(id); 
     } 
     return elements[id]; 
    } 

    function bindUIActions() { 
     menuElements(); 
     s('dropdown').onclick = function(e) { 
      goDropDown(); 

      e.stopPropagation(); 
     }; 
     s('menu').onclick = function(e) { 
      goResponsive(); 

      e.stopPropagation(); 
     }; 
     //hideMenu(); 
    } 

    function menuElements() { 
     var menuElements = s('menu'); 
     menuElements.insertAdjacentHTML('afterBegin','<button type="button" id="menutoggle" class="navtoogle button" aria-hidden="true"><i aria-hidden="true" class="icon-coffee"> </i> Menu</button>'); 
    } 

    function hideMenu() { 
     document.onclick = function(e) { 
      var mobileButton = s('menutoggle'); 
      var buttonStyle = mobileButton.currentStyle 
       ? mobileButton.currentStyle.display 
       : getComputedStyle(mobileButton, null).display; 
      if (buttonStyle === 'block' 
      && e.target !== mobileButton 
      && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) { 
       changeClass(mobileButton, 'navtoogle active', 'navtoogle'); 
      } 
     } 
    } 
    function hasClass(element, cls) { 
     return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; 
    } 
    function changeClass(r, className1 , className2) { 
     var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)"); 
     if (regex.test(r.className)) { 
      r.className = r.className.replace(regex, ' '+ className2 + ' '); 
     } else { 
      r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+ className1 +' '); 
     } 
     return r.className; 
    } 

    function goResponsive() { 
     // Toggle the class on click to show/hide the menu 
     changeClass(s('menutoggle'), 'navtoogle active', 'navtoogle'); 
    } 

    function goDropDown() { 
     changeClass(s('dropdown'), 'inactive-dropdown', 'active-dropdown'); 
    } 

    root.NavigationWidget = { 
     init: function() { 
      bindUIActions(); 
     } 
    }; 

})(this); 
NavigationWidget.init(); 

Answer 1

Попробуйте добавить к вашей CSS в < 480px разделе:

.navtoogle.active + ul { 
    display: block; 
}