Question

所以我认为这只是关于我做的导航而且工作得很好，但我只是意识到当我将分辨率更改为1768x992时，我的导航功能就像我想要的那样工作

问题是当我运行分辨率为1768x992或更低的代码时，我无法点击或悬停主页链接。左侧的第一个孩子（家）不能悬停，但是当我在靠近注册时向右摇动我的鼠标时，它将显示悬停动作。此外，我无法点击主页链接。

首先想到的是我的边框堆栈橡皮擦

.nav:nth-child(n+2){ margin-left:-2px; }

但是当我清理它并看到发生了什么时它只是感觉一样。不知道用主页按钮进行了什么，有些人可以向我解释一下为什么......

这是我的代码

＆＃13;

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Helvetica
}
/*header*/

header {
  width: 100%;
}
#logo {
  position: absolute;
  left: 0;
  top: 0;
}
#logo img {
  width: 40%;
}
/*navigation*/

.navigation {
  top: 0;
  width: 50%;
  height: 120px;
  margin: 0 auto;
  text-align: center;
}
.nav-head {
  font-size: 0;
  margin-top: 5%;
  padding-left: 0;
  width: 100%;
}
.nav a {
  color: #e74c3c;
  text-decoration: none;
  font-size: 1em;
}
.nav {
  list-style: none;
  display: inline-block;
  border: solid 2px #e74c3c;
  font-size: 15px;
  margin: 0;
  padding: 8px 18px;
  min-width: 20%;
}
.nav:nth-child(n+2) {
  margin-left: -2px;
}
.nav:hover {
  padding: 16px 18px;
  margin-top: -16px;
}
.nav.currentPage {
  padding: 16px 18px;
  margin-top: -16px;
}

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="css/main.css" />
</head>

<body>
  <header>
    <div id="logo">
      <a href="index.php">
        <img src="Asset/Logo.png" alt="logo" />
      </a>
    </div>

    <nav class="navigation">
      <ul class="nav-head">
        <li class="nav" id="nav1"><a href="index.php">HOME</a>
        </li>
        <li class="nav" id="nav2"><a href="registrasi.php">REGISTRATION</a>
        </li>
        <li class="nav" id="nav3"><a href="panduan.php">TUTORIAL</a>
        </li>
        <li class="nav currentPage" id="nav4"><a href="#">CONTACT US</a>
        </li>
      </ul>
    </nav>
  </header>


</body>


</html>

＆＃13;

当我以1768x992或更低分辨率运行时，无法点击链接或悬停

0 个答案: