Bootstrap汉堡菜单移动-单击将出现，然后消失

Question

我采用了引导程序主题，并且手机上的汉堡包菜单不起作用。在移动设备上将菜单切换为打开状态时，它将先打开然后快速关闭，但是菜单链接仍然可以像被隐藏一样被按下，就像它们不可见一样。

我检查了原始文件菜单是否损坏，并且没有。我尝试使用谷歌搜索来找出问题所在，但我一直在努力寻找答案。

我唯一拥有的是当我使用.menu {position: absolute;}时，手机上的菜单会打开，然后迅速关闭。当我将其更改为.menu {position: relative;}时，菜单将保持打开状态，但是可以完全对齐并且看起来不太好。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse.collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
        <div class="navbar-brand">
          <div id="logo" class="pull-left">
            <a href="index.html"><img src="images\robark-Logo.png" alt="Robark Solutions Logo" title="Robark Solutions" width="260" height="90"/></a>
          </div>
        </div>
      </div>

      <div class="navbar-collapse collapse">
        <div class="menu">
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation"><a href="index.html" class="active">Home</a></li>
            <li role="presentation"><a href="about.html">About Us</a></li>
            <li role="presentation"><a href="services.html">Services</a></li>
            <li role="presentation"><a href="portfolio.html">Portfolio</a></li>
            <li role="presentation"><a href="contact.html">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>

CSS：

.navigation  {
    background-color:#fff;
    padding:0;
}

.navbar-brand {
  min-height: 100px;
}

.navbar-brand h1 {
    margin-top:9px;
    padding-top:5px;
    float: left;
    font-size: 25px;
    color:#333;
    text-transform:uppercase;
    font-weight:900;
}
.navbar-brand h1 span {
    color: #F0A830;
}

.menu {
  position: absolute;
  overflow: hidden;
    font-size:12px;
    float:right;
    text-transform:uppercase;
    font-weight:700;
}

.menu:active ul {
  display: block;
}

.menu ul.nav-tabs li {
    color:#000;
}

.nav-tabs {
    border-bottom: 0;
}
.nav-tabs > li {
    float: left;
    margin-bottom: 0;
}
.nav-tabs > li > a {
    border-radius:0;
    color:#333;
    padding:30px;
}

.nav-tabs > li > a:hover {
    color: #F0A830;
    border-color: #fff #fff #fff;
    border-radius:0;
    background-color:#fff;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}
.nav-tabs > li > a.active {
    color: #F0A830;
    border-radius:0;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

@media (max-width: 767px) {
    .navbar-brand {
    min-height: 85px;
        padding-top: 6px;
    }
    .navbar-brand h1 {
        margin-top: 0;
    }

    .nav-tabs > li {
        float: none;
        display: block;
    }

    .menu {
    position: absolute;
        left: 0;
        right: 0;
        background: #fff;
  }

  .menu .collapse {
    display: none;
    visibility: hidden;
}

  .menu-default{
    z-index: 1030;
  }

  .menu:active ul {
    display: block;
  }

    .nav-tabs > li > a {
        padding:15px 15px;
        border-bottom: 1px solid #f3f3f3;
    }

    .nav-tabs > li > a:hover {
        border-color: #f3f3f3;
    }
}

引导CSS：

 @media (min-width: 768px) {
.navbar-header {
 float: left;
}
}
.navbar-collapse {
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-overflow-scrolling: touch;
}
.navbar-collapse.in {
overflow-y: auto;
}
@media (min-width: 768px) {
.navbar-collapse {
 width: auto;
 border-top: 0;
 -webkit-box-shadow: none;
 box-shadow: none;
}

.navbar-collapse.collapse {
 display: block!important;
 height: auto!important;
 padding-bottom: 0;
 overflow: visible!important;
 visibility: visible!important;
}

.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
 padding-right: 0;
 padding-left: 0;
}
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
max-height: 340px;
}