尝试悬停时子菜单消失答案

【问题标题】：Sub Menu disappearing when trying to hover尝试悬停时子菜单消失
【发布时间】：2018-09-16 19:59:18
【问题描述】：

我正在尝试重新创建网站模板，但我的菜单和子菜单存在一些问题。当我想将鼠标悬停在子菜单上时，它会消失，我知道它可能来自那个间隙（边距），但是我可以做什么而不必删除边距？

这是我要复制的模板：https://www.templatemonster.com/demo/69211.html

<body>
 <div class="nav center">
 <img src="logo.png"/ id="logo">
 <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Departments <span style="font-size:12px">&#8744; </span></a>
      <div class="subMenuBox1">
        <ul class="subMenu1">
          <li><a href="#">Dental</a></li>
          <li><a href="#">Cardiology</a></li>
          <li><a href="#">Neurology</a></li>
          <li><a href="#">Pediatric</a></li>
        </ul>

        <ul class="subMenu2">
          <li><a href="#">Pulmonary</a></li>
          <li><a href="#">Ophtalmology</a></li>
          <li><a href="#">Traumatology</a></li>
          <li><a href="#">Diagnostics</a></li>
        </ul>
      </div>
    </li>

    <li><a href="#">Timetable</a></li>
    <li><a href="#">Pages <span style="font-size:12px">&#8744; </span></a></li>
    <li><a href="#">Contacts</a></li>
  </ul>
</div>
</body>

CSS：

html,body {
 margin:0;
 width:100%;
 height:100%;
 padding:0;
 }

.center {
  margin:0 auto;
  display:table;
  }

li {
 list-style: none;
}

#logo {
 float:left;
 position:absolute;
 left:-350px;
 top:50px;
}

.nav {
  position:relative;
  padding-top:90px;
  padding-bottom:90px;
 }

 .nav ul li {
   float:left;
   font-size:16px;
   padding:0 30px;
 }

 .nav ul li a {
   color:black;
  }

 .nav ul li a:hover {
   color:#00bb6d;
   text-decoration: none;
  }

 .subMenuBox1 {
   width:330px;
   height:150px;
   border-bottom:2px solid green;
   display:none;
   box-shadow:0 0 5px 0 gray;
   margin-top:30px;
   z-index:999;
   background-color:white;
  }

 .subMenu1 {
   position:absolute;
   z-index:999;
   margin-top:20px;
   }

.subMenu1 li  {
  float:left;
  clear:left;
  margin-bottom:10px;
  }

.subMenu1 li a {
  font-size:12.5px;
  }


 .nav li:hover .subMenu1{
   display:block;
  }

 .nav li:hover .subMenuBox1{
   display:block;
   position:absolute;
    }

【问题讨论】：

请在问题本身中输入minimal reproducible example，作为格式正确的文本。
@YashuMittal 为什么不呢？我只是在练习并尝试学习更多代码

标签： html css drop-down-menu submenu

【解决方案1】：

补偿保证金

您的代码有 20px margin-top:20px; 的边距。如果您将此设置为零并将其与padding-top:20px; 一起使用，则它可以工作。

它仍然有点混乱，但这就是其中的一部分:)

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}

.center {
  margin: 0 auto;
  display: table;
}

li {
  list-style: none;
}

#logo {
  float: left;
  position: absolute;
  left: -350px;
  top: 50px;
}

.nav {
  position: relative;
  padding-top: 90px;
  padding-bottom: 90px;
}

.nav ul li {
  float: left;
  font-size: 16px;
  padding: 0 30px;
}

.nav ul li a {
  color: black;
}

.nav ul li a:hover {
  color: #00bb6d;
  text-decoration: none;
}

.subMenuBox1 {
  width: 250px;
  height: 150px;
  border-bottom: 2px solid green;
  display: none;
  box-shadow: 0 0 5px 0 gray;
  margin-top: 30px;
  z-index: 999;
  background-color: white;
}

.subMenu1,
.subMenu2 {
  position: absolute;
  z-index: 999;
  margin-top: 20px;
  padding: 0;
}

.subMenu1 li,
.subMenu2 li {
  float: left;
  clear: left;
  margin-bottom: 10px;
}

.subMenu1 li a,
.subMenu2 li a {
  font-size: 12.5px;
}

.subMenu2 {
  left: 100px;
  /*border-left: 1px solid #333;*/
}

.nav li:hover .subMenuBox1 {
  display: block;
  position: absolute;
  margin-top: 0;
}

<div class="nav center">
  <img src="logo.png" / id="logo">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Departments <span style="font-size:12px">&#8744; </span></a>
      <div class="subMenuBox1">
        <ul class="subMenu1">
          <li><a href="#">Dental</a></li>
          <li><a href="#">Cardiology</a></li>
          <li><a href="#">Neurology</a></li>
          <li><a href="#">Pediatric</a></li>
        </ul>

        <ul class="subMenu2">
          <li><a href="#">Pulmonary</a></li>
          <li><a href="#">Ophtalmology</a></li>
          <li><a href="#">Traumatology</a></li>
          <li><a href="#">Diagnostics</a></li>
        </ul>
      </div>
    </li>

    <li><a href="#">Timetable</a></li>
    <li><a href="#">Pages <span style="font-size:12px">&#8744; </span></a></li>
    <li><a href="#">Contacts</a></li>
  </ul>
</div>

【讨论】：

您现在已经提供了您的代码。我会看看它并更新我的答案。
如果您能帮助我，我将不胜感激
是的，现在可以了，谢谢...有没有机会让它在菜单和我悬停时显示的下拉子菜单之间留出很小的边距？
哈哈！我也是为你做的。完成后会更新答案:)
您可以调整填充以使其更好地对齐。