我试图实现一个简单的汉堡包图标导航菜单为一个网站，我正在开发，但我有导航菜单的内容打开/出现在导航菜单，而不是在导航栏下面的问题。
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<title>Buck's Farmstand</title>
<link rel="icon" type="image/x-icon" href="G:webDevbucks_farmstandimagestomatoFaviconRounded.ico">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="G:webDevbucks_farmstandcssbucksMobileIndexStyles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="mainPageBody">
<header class="navHeader">
<div class=buttonContainer>
<a class="cta" href="G:webDevbucks_farmstandhtmlbucksContact.html"><button>Contact</button></a>
</div>
<div class=logoContainer>
<a href="#"><img class="logo" src="G:webDevbucks_farmstandlogosnewBucksLogo.jpg" alt="logo"></a>
</div>
<div id="myLinks">
<a href="G:webDevbucks_farmstandhtmlbucksInventory.html">Produce</a>
<a href="G:webDevbucks_farmstandhtmlbucksPickUpComingSoon.html">Online-Order</a>
<a href="G:webDevbucks_farmstandhtmlbucksAbout.html">About</a>
<a href="G:webDevbucks_farmstandhtmlbucksContact.html">Contact</a>
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="javascript:void(0);" class="hamIcon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</header>
<br>
</body>
</html>
CSS:
/*overrides everything for specifc page*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
/*background-color: #FFDAB9;*/
overflow: auto;
}
/*referring to all of these categories not specifc to a class/ID*/
li, a, button {
font-family: "cursive", cursive;
font-weight: 500;
font-size: 16px;
color: #000000;
text-decoration: none;
}
/*Bucks Nav CSS*/
/*Can add an href tag/ref here for logo to direct to*/
.logo{
object-fit: cover;
position: relative;
height: 60px;
width: 100%;
cursor: pointer;
}
.logoContainer{
margin: auto;
position: relative;
right: 35px;
}
.navHeader{
position: fixed;
width: 100%;
background: #deb887;
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 2%;
height: 65px;
overflow: hidden;
z-index: 950;
}
.navHeader #myLinks{
display: none;
position: relative;
top: 5px;
}
/* Style the hamburger menu */
.hamIcon {
overflow: auto;
background: none;
display: block;
position: fixed;
right: 20px;
top: 23px;
}
.cta{
background: #deb887;
overflow: hidden;
width: 15%;
}
.buttonContainer{
overflow: hidden;
}
button{
padding: 9px 5px;
background-color: rgba(35,255,0,0.5);
border: 2px solid;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: yellow;
}
这里的问题是，您的<header>类.navHeader正在使用display: flex;，因此该元素内的项目将充当柔性元素。你可以在这里了解更多
有几种方法可以做到这一点。
我认为你最好的解决方案是移动<div id="myLinks"></div>块下面的标题。
然后在你的CSS中:从*中移除overflow: auto。
在#myLinks之前删除.navHeader类，并添加更多属性以确保块位于标题#myLinks{top: 65px; padding: 10px; text-align: center;}
完整代码如下:
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<title>Buck's Farmstand</title>
<link rel="icon" type="image/x-icon" href="G:webDevbucks_farmstandimagestomatoFaviconRounded.ico">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="G:webDevbucks_farmstandcssbucksMobileIndexStyles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="mainPageBody">
<header class="navHeader">
<div class=buttonContainer>
<a class="cta" href="G:webDevbucks_farmstandhtmlbucksContact.html"><button>Contact</button></a>
</div>
<div class=logoContainer>
<a href="#"><img class="logo" src="G:webDevbucks_farmstandlogosnewBucksLogo.jpg" alt="logo"></a>
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="javascript:void(0);" class="hamIcon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</header>
<div id="myLinks">
<a href="G:webDevbucks_farmstandhtmlbucksInventory.html">Produce</a>
<a href="G:webDevbucks_farmstandhtmlbucksPickUpComingSoon.html">Online-Order</a>
<a href="G:webDevbucks_farmstandhtmlbucksAbout.html">About</a>
<a href="G:webDevbucks_farmstandhtmlbucksContact.html">Contact</a>
</div>
<br>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</body>
</html>
CSS
/*overrides everything for specifc page*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
/*background-color: #FFDAB9;*/
/* overflow: auto; */
}
/*referring to all of these categories not specifc to a class/ID*/
li,
a,
button {
font-family: "cursive", cursive;
font-weight: 500;
font-size: 16px;
color: #000000;
text-decoration: none;
}
/*Bucks Nav CSS*/
/*Can add an href tag/ref here for logo to direct to*/
.logo {
object-fit: cover;
position: relative;
height: 60px;
width: 100%;
cursor: pointer;
}
.logoContainer {
margin: auto;
position: relative;
right: 35px;
}
.navHeader {
position: fixed;
width: 100%;
background: #deb887;
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 2%;
height: 65px;
overflow: hidden;
z-index: 950;
}
#myLinks {
display: none;
position: relative;
top: 65px;
text-align: center;
padding: 10px;
width: 100%;
background: #deb887;
}
/* Style the hamburger menu */
.hamIcon {
overflow: auto;
background: none;
display: block;
position: fixed;
right: 20px;
top: 23px;
}
.cta {
background: #deb887;
overflow: hidden;
width: 15%;
}
.buttonContainer {
overflow: hidden;
}
button {
padding: 9px 5px;
background-color: rgba(35, 255, 0, 0.5);
border: 2px solid;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: yellow;
}