我的下拉菜单在所有浏览器和chrome移动预览中都可以正常使用，但是在实际的移动设备上，它不起作用。在ipad上根本无法显示，在手机上，您只能在菜单内看到文本的最底部。
我尝试更改z-index。我还考虑过为菜单设置一个固定的高度，但最终视您的窗口大小而定看起来不均匀...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.navbar {
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
}
.navbar span {
display: block;
text-align: center;
padding: 1vw 5vw 1vw 0px;
text-decoration: none;
font-size: 2.5vw;
}
#home {
float: left;
}
.dropup {
float: right;
position: relative;
display: inline-block;
}
.dropup-content {
display: none;
position: fixed;
bottom: 3.5vw;
min-width: 100vw;
z-index: 1;
}
#clickContact {
background-color: aqua;
}
#clickAbout {
background-color: red;
}
.show {
display: block;
}
</style>
</head>
<body>
<footer>
<div class="navbar">
<span id="home">Home</span>
<div>
<span class="dropup" onclick="contactFunction()">Contact</span>
<div class="dropup-content" id="clickContact">
<p>some other stuff</p>
</div>
</div>
<div>
<span class="dropup" onclick="aboutFunction()">About</span>
<div class="dropup-content" id="clickAbout">
<p>Some stuff</p>
</div>
</div>
</div>
</footer>
<script>
function contactFunction() {
document.getElementById("clickContact").classList.toggle("show");
document.getElementById("clickAbout").classList.remove("show");
}
function aboutFunction() {
document.getElementById("clickAbout").classList.toggle("show");
document.getElementById("clickContact").classList.remove("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropup')) {
var dropdowns = document.getElementsByClassName("dropup-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains("show")) {
openDropdown.classList.remove("show");
}
}
}
}
</script>
</body>
</html>
您仅需要在移动设备上增加菜单的字体大小。并且也增加dropup-content的位置。您可以尝试以下CSS：
@media (max-width: 860px) {
.navbar span {
font-size: 5.5vw;
}
.dropup-content {
bottom: 9.5vw;
}}