我完全用HTML和CSS编写了这个网站，没有使用任何库。下拉菜单在任何计算机或Android手机上都可以正常工作，我已经使用多个网络浏览器进行了测试。在 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/
我已经在 Safari 上对此进行了测试，菜单的行为显示出与您描述的相同的问题。要修复它，只需从媒体查询中的nav元素选择器中删除overflow: hidden属性即可。