我对编码很陌生，我在一个虚构的餐厅网站上工作。我似乎不知道如何消除我的下拉菜单和菜单部分的顶部导航栏之间的差距。理想情况下，我想粉红色的下拉框是直接在黑色导航条。我哪里做错了，有什么建议吗?我在各处都设置了边距和内边距。甚至在我的CSS页面的开始处设置了margin 0和padding 0，看看是否有效果，但没有。
附件是我的html和CSS代码
body {
background-color: #41393d;
}
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: black;
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: black;
}
.logo_container {
height: 100%;
display: table;
float: left;
}
.logo {
height: 100%;
display: table-cell;
vertical-align: middle;
} /* Navigation */
.navigation {
float: right;
height: 100%;
} .navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 0px 20px;
position: relative;
}
a:hover {
color: #8a8c8f !important;
} .navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color:#BE1E2D;
font-family: athelas,
serif; font-style:normal;
text-decoration: none;
} .sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: #d4a18d;
} .navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}<!DOCTYPE html>
TOWN_Restaurant` <header>
<div class="header">
<div class="header_content">
<div class="logo_container">
<img alt="TOWN logo" id="image" class="logo" src="images/town_logo.png">
</div>`
<ul class="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="our_story.html">Our Story</a></li>
<li><a href="#">Menu</a>
<div class="sub_menu1">
<ul>
<li><a href="menu.html">Cuisine</a></li>
<li><a href="menu_2.html">Beverages</a></li>
</ul>
</div>
</li>
<li><a href="contact.html">Contact</a></li>
<li><a href="reservations.html">Reservations</a></li>
</ul>
</div>
</div>
</header>问题是你的nav<ul>的顶部和底部的边距为16px，而高度是父元素高度的100%，也就是50px，所以<ul>的总高度是:
50 px(父元素高度)+16px(margin-top) +16px(margin-bottom) =2px
，这是使它的头部有一个固定的高度为50px。要解决这个问题，必须执行
1:设置你的nav<ul>的边距为0，并使用padding-top代替<li>的box-sizing值设置为border box，这样padding不会影响<li>的高度。
二:设置你的"sub_menu"的顶部到100%(在这里是50px[父元素的高度]))这将使下拉菜单在导航栏的正下方。
，这里它在工作:
body {
background-color: #41393d;
}
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: black;
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: black;
}
.logo_container {
height: 100%;
display: table;
float: left;
}
.logo {
height: 100%;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
}
a:hover {
color: #8a8c8f !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color: #BE1E2D;
font-family: athelas, serif;
font-style: normal;
text-decoration: none;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: #d4a18d;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}TOWN_Restaurant`
<header>
<div class="header">
<div class="header_content">
<div class="logo_container">
<img alt="TOWN logo" id="image" class="logo" src="images/town_logo.png">
</div>`
<ul class="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="our_story.html">Our Story</a></li>
<li><a href="#">Menu</a>
<div class="sub_menu1">
<ul>
<li><a href="menu.html">Cuisine</a></li>
<li><a href="menu_2.html">Beverages</a></li>
</ul>
</div>
</li>
<li><a href="contact.html">Contact</a></li>
<li><a href="reservations.html">Reservations</a></li>
</ul>
</div>
</div>
</header>