Question

我正在尝试创建一个响应式导航栏，但是当我将其调整为移动视图时，导航栏链接将变得无响应，并且单击它们后什么也不会发生。

我对这一切还很陌生，我只是想通过反复试验来学习不同的东西。我将不胜感激。

谢谢！

a {
  color: black;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
}

a:hover {
  color: #E17F01;
}

header {
  background: #fff;
  width: 100%;
  height: 86px;
  position: fixed;
  top: 0;
  left: 0;
  border-bottom: 4px solid #E17F01;
  z-index: 100;
}

nav {
  float: right;
  padding: 26px;
}

.icon {
  display: none;
}

.main-nav {
  list-style: none;
}

li {
  display: inline-block;
  float: left;
  padding: 10px
}

#s1 {
  height: 250px;
  background-color: red;
}

#s2 {
  height: 250px;
  background-color: blue;
}

#s3 {
  height: 250px;
  background-color: yellow;
}

#s4 {
  height: 250px;
  background-color: green;
}

@media only screen and (max-width: 600px) {
  header {
    position: fixed;
  }
  .icon {
    display: inline-block;
  }
  nav li {
    text-align: center;
    width: 100%;
    padding: 10px 0;
    margin: 0;
  }
  nav:hover ul {
    display: block;
  }
  nav ul,
  nav:active ul {
    display: none;
    position: absolute;
    padding: 20px;
    background: #fff;
    border: 5px solid #444;
    right: 20px;
    top: 60px;
    width: 50%;
    border-radius: 4px 0 4px 4px;
  }
}

<html>

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>

<body>
  <header>
    <nav>
      <a class="icon"><i class="fas fa-bars fa-2x"></i></a>
      <ul class="main-nav">
        <li><a href="#s1">One</a></li>
        <li><a href="#s2">Two</a></li>
        <li><a href="#s3">Three</a></li>
        <li><a href="#s4">Four</a></li>
      </ul>
    </nav>
  </header>
  <section id="s1"></section>
  <section id="s2"></section>
  <section id="s3"></section>
  <section id="s4"></section>
</body>

</html>

无法在移动设备上单击导航栏链接

0 个答案: