大家好，我有以下菜单，我已经做了很长一段时间了。有些部分是基于我在互联网上找到的教程，有些部分是从头开始编写的。
到目前为止，我只在 chrome 上进行了测试，我不确定其他浏览器，但是当我将浏览器的大小调整为 < 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();