折叠 CSS3 导航不可单击

导航工作正常，直到特定宽度（约1100px）。如果宽度变小，则链接不再可单击。我不知道为什么。我唯一发现的是，当我添加一些文本时（例如在第 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>

因此，

所有添加文本所做的基本上都是阻止浏览器呈现随后的其余 css。你需要做的是;

1）删除您在css中添加的文本。

2）删除.menu和.heading上的 z 索引。这就是问题所在。您已经对.heading应用了较低的 z 索引，但由于它以比.menu更高的堆叠顺序存在于 html 中，因此它没有按预期工作。所以.heading隐藏了你的.menu

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

我还注意到：

a）您在徽标图像上使用重复的 ID。 #lim_logo改用类，然后相应地取消 CSS 的日期。

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

c）更新媒体查询表达式。最大宽度应（在大多数情况下）停止在断点下方。例如，您可能有一个 1300 像素的断点，因此在该断点以下定位的最大宽度为 1299 像素。然后，从该断点及以上定位的最小宽度将为 1300 像素。并且没有必要包括最小宽度：0px，因为这意味着这一点。

相关内容

最新更新

热门标签：