删除导航栏和下拉菜单之间空格的方法答案

【问题标题】：Way to remove space between nav-bar and drop down menu删除导航栏和下拉菜单之间空格的方法
【发布时间】：2021-09-24 10:35:54
【问题描述】：

我对编码非常陌生，并且正在为一家餐馆开发一个虚构的网站。我似乎无法弄清楚如何消除我的下拉菜单和菜单部分下的顶部导航栏之间的差距。理想情况下，我希望粉红色的下拉框直接位于黑色导航栏下方。关于我做错了什么有什么建议吗？我到处玩边距和填充。甚至在我的 CSS 页面的开头做了一个 margin 0 和 padding 0 来看看这是否有效果，它没有。

附件是我的 HMTL 和 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>

【问题讨论】：

添加顶部导航栏html代码
您好，您的部分html代码丢失，我们需要它来帮助您解决问题
太奇怪了！它显示在我的末端。我不知道如何将其添加到原始帖子中，但这是缺少的部分：

标签： html css

【解决方案1】：

问题是您的导航 <ul> 的顶部和底部边距为 16px，而高度是父级高度的 100%，即 50px，因此 <ul> 的总高度为：

50px（父母的高度）+ 16px（上边距）+ 16px（下边距）= 82px强>

这使它脱离了固定高度为 50 像素的标题。要解决此问题，您必须

1st: 将您的导航<ul> 的边距设置为 0，并在 <li>s 上使用 padding-top 而不是将它们的 box-sizing 值设置为边框框，以便填充不会t 影响<li>s 的高度。

第二个：将“sub_menu1”的顶部设置为 100% （在这种情况下为 50px [父母的高度] strong>)，这将在您的导航下方获得下拉菜单。

它正在工作：

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>

【讨论】：

哇！非常感谢。我永远不会知道我的
是的，
明白了！你知道为什么我的网站在不同的浏览器中显示不同吗？例如在 Chrome 和 Firefox 中，调整后的 CSS 完全符合我的要求，但在 Safari 中，仍然存在差距。