通过将鼠标悬停在子菜单上进行选择时，下拉菜单消失

Question

当我将鼠标悬停在子菜单上时，然后将光标拖动到子菜单上并将鼠标悬停在子菜单分配器上时，只有当我选择任何其他导航菜单并将其悬停在该菜单上时才会出现，但有时仅会起作用。

这是我的代码

html
{ height: 100%;}

*
{ margin: 0;
  padding: 0;}
body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
  background: #FFF;
  color: #555;}

p
{ padding: 0 0 20px 0;
  line-height: 1.7em;}

#menubar
{ width: 880px;
  height: 46px;} 

ul#menu
{ float: right;
  margin: 0;}

ul#menu li
{ float: left;
  padding: 0 0 0 9px;
  list-style: none;
  margin: 1px 2px 0 0;
  background: #5A5A5A url(tab.png) no-repeat 0 0;}

ul#menu li a
{ font: normal 100% 'trebuchet ms', sans-serif;
  display: block; 
  float: left; 
  height: 20px;
  padding: 6px 35px 5px 28px;
  text-align: center;
  color: #FFF;
  text-decoration: none;
  background: #5A5A5A url(tab.png) no-repeat 100% 0;} 

ul#menu li.selected a
{ height: 20px;
  padding: 6px 35px 5px 28px;}

ul#menu li.selected
{ margin: 1px 2px 0 0;
  background: #00C6F0 url(tab_selected.png) no-repeat 0 0;}

ul#menu li.selected a, ul#menu li.selected a:hover
{ background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
  color: #FFF;}

ul#menu li a:hover
{ color: #E4EC04;}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    display: inline-block;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    z-index: 1;
    margin-top: 35px;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

<div id="main">

      <div id="menubar">
        <ul id="menu"  >


          <li ><a  href="#" >Home</a></li>

    
          <li ><a ref="#" >Contact Us</a></li>
          <li >
            <div class="dropdown">
              <a class="dropbtn">Dropdown</a>
              <div class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
            </div>
          </li>

        </ul>
      </div>
    </div>

我该如何解决.. 谢谢您的帮助。我尝试过，但失败了，不知道如何解决。

谢谢。

Answer 1

这是因为“下拉菜单”和下拉列表之间有空格。不用硬编码以px为单位的边距，而是使用百分比。我还建议使用top而不是margin-top。将.dropdown-content CSS替换为：

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    z-index: 1;
    top: 100%; //To move it up or down more you can use calc like: calc(100% + 1px) or calc(100% - 2px)
}

Answer 2

当您将鼠标从下拉菜单切换到子菜单时，由于子菜单的margin-top值，您暂时不会悬停在div上。如果您确实希望在两者之间进行划分，请添加白色顶部边框（即border-top：2px纯白色；）。

这里有一个JSFiddle

如下更改CSS：

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  z-index: 1;
  margin-top: 30px;
}

按如下所示更改HTML：

<li class="dropdown"> 
  <div>
   <a class="dropbtn">Dropdown</a>
     <div class="dropdown-content">
       <a href="#">Link 1</a>
       <a href="#">Link 2</a>
       <a href="#">Link 3</a>
     </div>
  </div>
</li>

Answer 3

问题仅仅是li.dropdown和.dropdown-content之间的鸿沟。值得注意的是，当您将光标从下拉按钮快速快速移动到下拉列表时，它不会消失。但是，这样做会慢慢消失。

我在这里想到的最简单的解决方案是减少下拉列表的顶部边距，同时在第一个列表项中添加顶部填充以补偿该丢失的边距（顶部边距在这里不起作用）。因此，您的下拉菜单代码如下所示：

#menubar {
  width: 880px;
  height: 46px;
}

ul#menu {
  float: right;
  margin: 0;
}

ul#menu li {
  float: left;
  padding: 0 0 0 9px;
  list-style: none;
  margin: 1px 2px 0 0;
  background: #5A5A5A url(tab.png) no-repeat 0 0;
}

ul#menu li a {
  font: normal 100% 'trebuchet ms', sans-serif;
  display: block;
  float: left;
  height: 20px;
  padding: 6px 35px 5px 28px;
  text-align: center;
  color: #FFF;
  text-decoration: none;
  background: #5A5A5A url(tab.png) no-repeat 100% 0;
}

ul#menu li.selected a {
  height: 20px;
  padding: 6px 35px 5px 28px;
}

ul#menu li.selected {
  margin: 1px 2px 0 0;
  background: #00C6F0 url(tab_selected.png) no-repeat 0 0;
}

ul#menu li.selected a,
ul#menu li.selected a:hover {
  background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
  color: #FFF;
}

ul#menu li a:hover {
  color: #E4EC04;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  display: inline-block;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  z-index: 1;
  margin-top: 30px;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:first-child {
  padding-top:17px;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}

<div id="main">
  <div id="menubar">
    <ul id="menu">
      <li><a href="#">Home</a></li>
      <li><a ref="#">Contact Us</a></li>
      <li>
        <div class="dropdown">
          <a class="dropbtn">Dropdown</a>
          <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>