Question

我完全用HTML和CSS编码了此网站，而没有使用任何库。下拉菜单在任何计算机或Android手机上都可以正常运行，我已经使用多种Web浏览器进行了测试。在iPhone上，下拉菜单不会显示在屏幕上。

我认为这与iPhone不支持:hover的问题有关，但是经过大量测试并尝试对其进行修复，我发现悬停并不是问题所在。单击导航后，我发现虽然不可见，但如果单击正确的位置，则下拉菜单中的链接会起作用。本质上，下拉菜单和链接在那里，但是看不到它们。我尝试添加visiblity: visible，z-index: 999和几个不同的display值，但是问题仍然存在。

nav {
  position: relative;
  background: white;
  border: .05em solid #004EA8;
  width: 100%;
}

nav .logo {
  margin-bottom: .3em;
}

nav a {
  color: white;
  text-decoration: none;
  display: block;
  text-align: center;
}

nav ul,
nav:active ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  position: fixed;
  padding: 20px;
  background: white;
  top: 3.8em;
  width: 100%;
}

.nav-sections {
  display: none;
  width: 100%;
}

.navbar-link {
  display: flex;
  flex-direction: column;
  font-style: none;
  text-decoration: none;
  color: #004EA8;
}

.dropdown {
  display: inline-block;
}

nav li,
.dropbtn {
  background-color: white;
  font: inherit;
  text-align: center;
  width: 100%;
  padding: 5px 0;
  margin: 0;
  width: 100%;
}

.dropbtn a {
  color: #004EA8;
}

nav:hover ul {
  display: block;
}

.dropbtn {
  display: flex;
  flex-direction: column;
  font-style: none;
  color: white;
  padding: 0;
}

.dropdown-content {
  display: none;
}

.nav-button {
  display: inline-block;
  float: right;
  color: white;
  margin: .75em .6em .4em 1em;
}

.hamburger {
  position: relative;
  display: inline-block;
  width: 1.25em;
  height: 1.2em;
  margin-top: .85em;
  margin-right: 0.3em;
  border-top: 0.2em solid #004EA8;
  border-bottom: 0.2em solid #004EA8;
}

.hamburger:before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0px;
  width: 100%;
  border-top: 0.2em solid #004EA8;
}

<nav class="nav">
  <nav class="navbar-items items-left">
    <img class="logo" src="images/NELS Logo 2145C.png" alt="New England Language School Building">
    <div class="nav-button navbar-link navbar-link-toggle">
      <div class="hamburger"></div>
    </div>
    <ul class="nav-sections">
      <li class="single-line-link"><a href="index.html" class="current navbar-link">Home</a></li>
      <li class="single-line-link"><a href="about.html" class="navbar-link">About</a></li>
      <li class="single-line-link">
        <div class="dropdown navbar-link">
          <button class="dropbtn"><a href="languages.html">Languages</a></button>
          <div class="dropdown-content">
            <a href="ESL.html">English</a>
            <a href="French.html">French</a>
            <a href="German.html">German</a>
            <a href="Italian.html">Italian</a>
            <a href="Japanese.html">Japanese</a>
            <a href="Mandarin.html">Mandarin</a>
            <a href="Portuguese.html">Portuguese</a>
            <a href="Spanish.html">Spanish</a>
            <a href="contact.html">Request a Language</a>
          </div>
        </div>
      </li>
      <li class="single-line-link"><a href="corporate.html" class="navbar-link">Corporate</a></li>
      <li class="double-line-link"><a href="sessions.html" class="navbar-link">Session<br>Dates</a></li>
      <li class="single-line-link"><a href="events.html" class="navbar-link">Events</a></li>
      <li class="double-line-link"><a href="LanguagePartner.html" class="navbar-link">Language<br>Partner</a></li>
      <li class="single-line-link"><a href="photos.html" class="navbar-link">Photos</a></li>
      <li class="single-line-link"><a href="location.html" class="navbar-link">Location</a></li>
      <li class="single-line-link"><a href="policies.html" class="navbar-link">Policies</a></li>
      <li class="single-line-link"><a href="contact.html" class="navbar-link">Contact</a></li>
    </ul>
  </nav>
</nav>

同样，这只是在iPhone上的问题。非常感谢您的帮助，因为我花了数小时/每天的时间寻找并尝试各种无法使用的解决方案。

我在HTML和CSS中包含了导航的代码，以使下拉菜单正常工作。要查看完整的代码，您可以访问https://www.newenglandlanguage.com/

网站

Answer 1

我已经在Safari上进行了测试，菜单的行为显示了与您所描述的相同的问题。要解决此问题，只需从媒体查询中的overflow: hidden元素选择器中删除nav属性即可。

css下拉导航栏可用于移动作品，但在iPhone上不可见

1 个答案: