折叠 css3 导航不可点击

Question

导航在特定宽度（大约 1100 像素）之前工作正常。如果宽度变小，链接将不再可点击。我不知道为什么。我唯一发现的是，当我添加一些文本（例如在第 51 行 "mediaquery..." 中）时，导航工作正常，但它的背景颜色变成白色而不是原来的深灰色。

你知道我做错了什么吗？

代码如下：

<html lang="de">
    <head>
        <meta charset="utf  -8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <link rel="stylesheet" href="main.css">


        <!--The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

        <!--[if lt IE 8]>
          <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <!--[if lt IE 9]>
            <script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <title>Arbeitsgruppe Wolken und globales Klima - Universität Leipzig (Fakultät für Physik und Geowissenschaften)</title>


        <style>

            *{
                font-family: helvetica,arial,sans-serif;
            }

            @media (max-width: 1300px) and (min-width: 0px) {
                #luecke_nav1 {
                    display: none;
                }
            }

            @media (max-width: 1029px) { 
              .heading #seitentitel h1 {
                font-size: 140%;
              }
            }

            @media (min-width: 1029px) {
              .menu {
                font-size: 1.2em;
              } 
            }

            mediaqueryzerhautklassedanach 

            .menu {
              padding: 0.5em;
              background: #414141;
              min-height: 3em;
              line-height: 1em;
              position: fixed;
              top: 0;
              left: 0;
              z-index: -6;
            }

            .menu > ul {
              transition: max-height 0.25s linear;
            }

            .menu ul {
              margin: 0;
              padding: 0;
              text-align: center;
            }

            .menu li {
              transition: visibility .25s linear;
              display: inline-block;
              padding: .45em 1.1em;
              margin: 0 .3em;
              position: relative;
            }

            @media (min-width: 841px) {
              .menu li ul {
                display: none;
                position: absolute;
                top: 100%;
                margin-top: 1px;
                left: -1px;
                right: -1px;
              }

              .menu li:hover ul {
                display: block;
              }

              .menu li li {
                margin: -1px 0 0 0;
                box-sizing: border-box;
                width: 100%;
              }

              #logo {
                    display: none;
                }
            }

            @media (max-width: 841px) {
              #nav_kasten {
                display: none;
              }

              .hvr-bounce-in{
                      display: inline-block;
                      vertical-align: middle;
                      -webkit-transform: translateZ(0);
                      transform: translateZ(0);
                      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
                      -webkit-backface-visibility: hidden;
                      backface-visibility: hidden;
                      -moz-osx-font-smoothing: grayscale;
                      -webkit-transition-duration: 0.5s;
                      transition-duration: 0.5s;
              }

              .hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
                -webkit-transform: scale(1.2);
                  transform: scale(1.2);
                  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
                  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
              }

              #luecke_nav{
                display: none;
              }

              .menu > ul {
                max-height: 0;
                overflow: hidden;
                margin: 0 3.5em 0 1em;
              }

              .menu li {
                visibility: hidden;
                display: block;
                padding: 0.5em 0.6em;
                border: none;
              }

              .menu li ul {
                margin-top: 0.5em;
                border-left: 1px solid #000;
              }

              .menu .navbar-handle {
                display: block;
              }

              #navbar-checkbox:checked + .menu ul {
                max-height: 300px;
              }

              #navbar-checkbox:checked + .menu li {
                visibility: visible;
              }

              #navbar-checkbox:checked + .menu .navbar-handle,
              #navbar-checkbox:checked + .menu .navbar-handle:after,
              #navbar-checkbox:checked + .menu .navbar-handle:before {
                border-color: #2098d1;
              }
            }

            .navbar-checkbox {
              display: none;
            }

            .navbar-handle {
              display: none;
              cursor: pointer;
              position: relative;
              font-size: 45px;
              padding: .5em 0;
              height: 0;
              width: 1.66666667em;
              border-top: 0.13333333em solid;
              color: #2098d1;
            }

            .navbar-handle:before,
            .navbar-handle:after {
              position: absolute;
              left: 0;
              right: 0;
              content: ' ';
              border-top: 0.13333333em solid;
            }

            .navbar-handle:before {
              top: 0.37777778em;
            }

            .navbar-handle:after {
              top: 0.88888889em;
            }

            .menu {
              top: 0;
              left: 0;
              right: 0;
            }

            .menu .navbar-handle {
              position: fixed;
              font-size: 1.2em;
              top: 0.7em;
              right: 12px;
              z-index: 10;
            }

            /* Overline From Center */

            .hvr-overline-from-center {
              display: inline-block;
              vertical-align: middle;
              -webkit-transform: translateZ(0);
              transform: translateZ(0);
              box-shadow: 0 0 2px rgba(0, 0, 0, 0);
              -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
              -moz-osx-font-smoothing: grayscale;
              position: relative;
              overflow: hidden;
            }

            .hvr-overline-from-center:before {
              content: "";
              position: absolute;
              z-index: -1;
              left: 50%;
              right: 50%;
              background: #2098d1;
              height: 7px;
              top: -20%;
              -webkit-transition-property: left, right;
              transition-property: left, right;
              -webkit-transition-duration: 0.3s;
              transition-duration: 0.3s;
              -webkit-transition-timing-function: ease-out;
              transition-timing-function: ease-out;
            }

            .hvr-overline-from-center:hover:before, .hvr-overline-from-center:focus:before, .hvr-overline-from-center:active:before {
              left: 0;
              right: 0;
            }

            a:link, a:visited, a:active {
                text-decoration: none;
                color: #2098d1;
            }

            a:hover {
                text-decoration: none;
                color: #2098d1;
            }

            #lim_logo {
                width: 50%;
                margin-top: 8%;
                text-align: center;
                z-index: 99;
            }

            #nav_kasten {
                width: 14.7%;
                height: 40%;
                z-index: 99;
                position: absolute;
                top: 0;
                margin-left: 42%;
            }

            #base { 
                position: relative;
                display: inline-block;
                width: 100%;
                text-align: center;
                color: white;
                background: gray;
                text-decoration: none;
                padding-bottom:15%;
                background-clip:content-box;
                overflow:hidden; 
            } 

            #base:after { 
                content: "";
                position: absolute;
                top:83%; 
                left: 0;
                background-color:inherit;
                padding-bottom:50%; width:57.7%;
                z-index: -1;


                -webkit-transform-origin:0 0;
                -ms-transform-origin:0 0;
                transform-origin:0 0;

                -webkit-transform: rotate(-30deg) skewX(30deg);
                -ms-transform: rotate(-30deg) skewX(30deg);
                transform: rotate(-30deg) skewX(30deg);
            }

            .hvr-bounce-in { 
            }

            .hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {  
            }

            #logo{
                width: 15%;
                top: 2%;
                left: 1%;
                z-index: 4;
                position: fixed;
            }

            .heading {
                background: url(https://pixabay.com/static/uploads/photo/2012/10/26/01/38/cold-front-63037_960_720.jpg) no-repeat center center fixed;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                background-attachment: fixed;   
                z-index:-7;
                padding: 18%;
            }

            #seitentitel {
                background-color:rgba(255,255,255,0.7);
                text-align: center;
                padding: 2%;
                margin: 0.5%;
            }

            .linie {
                border :none;
                border-top: 1px solid #0090E0;
                background-color:#FFFFFF;
                height: 1px;
                margin: 0px 80px 0px 80px;
            }



        </style>

    </head>


    <body>

        <header>
            <div id="nav_kasten">                       
                    <a href="#" id="base"><img id="lim_logo" src="http://www.uni-leipzig.de/~strahlen/web/images/LOGOLIM_trans_white.gif"></a>
            </div>

            <div id="logo">
                    <a href="#" id="base"><img id="lim_logo" src="http://www.uni-leipzig.de/~strahlen/web/images/LOGOLIM_trans_white.gif"></a>
            </div>

            <input type="checkbox" id="navbar-checkbox" class="navbar-checkbox">
            <nav class="menu">
              <ul>
                <li><a href="#home" class="hvr-overline-from-center active">Home</a></li>
                <li><a href="#team" class="hvr-overline-from-center">Team</a></li>
                <li><a href="#publications" class="hvr-overline-from-center">Ver&ouml;ffentlichungen</a></li>
                <li id="luecke_nav"><div id="luecke_nav1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> 
                <div id="luecke_nav2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></li>
                <li><a href="#projects" class="hvr-overline-from-center">Projekte</a></li>
                <li><a href="#thesis" class="hvr-overline-from-center">Abschlussarbeiten</a></li>
                <li><a href="#links" class="hvr-overline-from-center">Links</a></li>
              </ul>

              <label for="navbar-checkbox" class="navbar-handle hvr-bounce-in">
            </nav>  
        </header>

        <div class="col-md-12 heading">
            <div id="seitentitel">
                <hr class="linie">
                <h1> Arbeitsgruppe <br> Wolken und globales Klima</h1>
                <hr class="linie">
            </div>
        </div>


        <div class="col-md-12 text2">
            <h2 style="text-align: center;"></h2>
            <br>

            <div class="col-md-6">

            </div> 

            <div class="col-md-12">

            </div>
        </div>




        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

        <script>

        </script>

    </body>

Answer 1

因此，添加该文本实际上是阻止浏览器呈现后面的 css 其余部分。你需要做的是;

1) 删除您在 css.

中添加的文本

2) 删除 .menu 和 .heading 上的 z-index。这就是问题。您对 .heading 应用了较低的 z-index，但因为它在 html 中的堆叠顺序高于 .menu，所以它没有按您的预期工作它。所以 .heading 隐藏了你的 .menu

这应该可以解决您的问题。

我也注意到了：

a) 您在徽标图片上使用了重复的 ID。 #lim_logo 使用 class 代替，然后相应地取消 css 的日期。

b) 就在您结束 </nav> 之前，您缺少结束 </label> 标签。

c) 更新您的媒体查询表达式。最大宽度应该（在大多数情况下）停止在断点以下。例如，您可能在 1300 像素处设置了一个断点，因此低于该断点的定位的最大宽度将为 1299 像素。然后从该断点开始定位的最小宽度将为 1300 像素。而且没有必要包括 min-width:0px ，因为这将被暗示。

折叠 css3 导航不可点击

collapsing css3 nav not clickable

css

nav

clickable

media-queries