下拉菜单链接不可点击答案

【问题标题】：dropdown menu links not clickable下拉菜单链接不可点击
【发布时间】：2016-12-12 20:13:00
【问题描述】：

我正在为自己创建一个网站，并且正在按照 codecourse 的教程进行操作，完成后我注意到按钮无法单击，因为当您单击时，下拉菜单会消失。请帮忙？提前致谢。

教程：https://www.youtube.com/watch?v=pYN8FUiKfzA 代码 [HTML]：`

    <!DOCTYPE html>
      <html>
        <head>
          <meta charset="utf-8">

          <link rel="shortcut icon" href="img/cLogo.png" />
          <link rel="spreadsheets" href="styles/css/normalize.css">
          <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
          <link rel="stylesheet" href="styles/css/global.css">     
        </head>
        <body>
          <header>
            <nav class="nav-main">
              <div class="logo">iTzPvPLyfe</div>
              <a href="index.html" class="nav-item">Home</a>
              <a href="#" class="nav-item">Apply</a>
              <a href="#" class="nav-item nav-drop">dropdown</a>
              <div class="nav-content">
                <div class="nav-sub">
                  <ul>
                    <li><a href="skywars.html">Skywars</a></li>
                    <li><a href="#">Blitz SG</a></li>
                  </ul>
                </div>
              </div>         
              <a href="#" class="nav-item">About</a>
            </nav>  
          </header>
    <!-- -------------------------------------------------------------- -->      
          <section class="content">
            <p>
             Lorem Ipsum
            </p>
          </section>
    <!-- -------------------------------------------------------------- -->      
          <footer>  
          </footer>
        </body>
      </html>

代码[SASS]：

.nav-main {
     width: 100%;
     background-color: $nav-background-color;
     height: 70px;
     color: $nav-foreground-color;

     .logo {
        float: left;
        height: 40px;
        padding: 15px 30px;
        font-size: 1.4em;
        line-height: 40px;
      }

      > ul {
      @extend %plainlist;
      float: left;
       > li {
          float: left;
        }
      }

    }

    .nav-item {
      display: inline-block;
      padding: 15px 20px;
      height: 40px;
      line-height: 40px;
      color: $nav-foreground-color;
      text-decoration: none;

      &:hover {
          background: $nav-hover-color;
        }
    }

    .nav-drop {
      &:focus {
          background-color: $nav-hover-color;

          ~ .nav-content {
            max-height: 400px;
            @include transition(max-height, 0.4s, ease-in);
          }
      }
    }

    .nav-content {
      margin-left: 345px;
      position: absolute;
      top: 70px;  
      overflow: hidden;
      background-color: $nav-background-color;
      max-height: 0;

      a {
        color: $nav-foreground-color;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
          }
      }
    }

    .nav-sub {
      padding: 20px;

      ul {
        @extend %plainlist;

        a {
          display: inline-block;
        }
      }
    }

【问题讨论】：

标签： html css sass focus

【解决方案1】：

为我工作。我认为您没有正确包含 mixins。由于您没有将它们包含在上面的代码 sn-p 中，因此我转到教程链接并手动包含它们。尝试检查顶部的 sass 文件中是否包含 mixin，如教程中所示。确保你的文件名匹配，并且你的 mixins 匹配。

你的 sass 应该转换成这个 css。注意，我调整了颜色，你应该可以从这里取：

.nav-main {
  width: 100%;
  background-color: grey;
  height: 70px;
  color: white;
}
.nav-main .logo {
  float: left;
  height: 40px;
  padding: 15px 30px;
  font-size: 1.4em;
  line-height: 40px;
}
.nav-main > ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  float: left;
}
.nav-main > ul > li {
  float: left;
}

.nav-item {
  display: inline-block;
  padding: 15px 20px;
  height: 40px;
  line-height: 40px;
  color: pink;
  text-decoration: none;
}
.nav-item:hover {
  background: orange;
}

.nav-drop:focus {
  background-color: orange;
}
.nav-drop:focus ~ .nav-content {
  max-height: 400px;
  transition: max-height, 0.4s, ease-in;
}

.nav-content {
  margin-left: 345px;
  position: absolute;
  top: 70px;
  overflow: hidden;
  background-color: orange;
  max-height: 0;
}
.nav-content a {
  color: blue;
  text-decoration: none;
}
.nav-content a:hover {
  text-decoration: underline;
}

.nav-sub {
  padding: 20px;
}
.nav-sub ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.nav-sub ul a {
  display: inline-block;
}

【讨论】：

我确实在 ~ .nav-content 的位置包含了我的 mixins。不过感谢您的帮助。