将鼠标悬停在下拉菜单上后，可暂停下拉菜单即会关闭

Question

我试图制作一个当您将鼠标悬停在某个项目上时打开的下拉菜单。但我有两个问题：

1. 当我的鼠标离开项目时div会消失，所以只要我将鼠标悬停在项目或下拉菜单上，我就会显示div。
2. 这个问题与我相信的第一个问题密切相关。只要您将鼠标悬停在其上或下拉菜单中（目前仅在您悬停项目时，项目文本应保持绿色）。

以下是我迄今为止尝试过的代码：

＆＃13;
＆＃13;
#menu {
     float: left;
}
 #menu ul.top-menu {
     list-style: none;
     padding: 0;
}
 #menu ul.top-menu li {
     display: inline-block;
     float: left;
     margin: 0 5px;
     position: relative;
     font-family: 'Roboto', sans-serif;
     font-size: 18px;
}
 #menu ul.top-menu li a {
     margin: 0;
     padding: 0 5px;
     font-weight: 400;
     font-size: 18px;
     color: black;
     display: inline-block;
     text-decoration: none !important;
     outline: none;
}
 #menu ul.top-menu li a:hover {
     color: green;
}
 #menu ul.top-menu li a:hover + div {
     display: block;
}
 #menu .sub-container {
     display: none;
     position: absolute;
     top: 32px;
     left: -20px;
     width: 400px;
     background: black;
     border-top: 2px solid green;
     z-index: 10;
}
 #menu .sub-container ul.sub-menu {
     padding: 10px;
     overflow: hidden;
}
 #menu .sub-container ul.sub-menu li {
     width: 30%;
     float: left;
     margin: 0 1.65%;
}
 #menu .sub-container ul.sub-menu li:hover {
     background-color: green;
     color:white;
}
 #menu .sub-container ul.sub-menu li a {
     color:white;
     height: 30px;
     line-height: 30px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     padding: 0 10px;
     display: block;
     border-bottom: none !important;
}
＆＃13;
<div class="container">
   <div id="menu">
      <ul class="top-menu">
         <li>
            <a href="" onclick="return false">Sub Menu 1</a>
            <div class='sub-container'>
               <ul class='sub-menu'>
                  <li><a href='#'>Sub Option 1.1</a></li>
                  <li><a href='#'>Sub Option 1.2</a></li>
                  <li><a href='#'>Sub Option 1.3</a></li>
                  <li><a href='#'>Sub Option 1.4</a></li>
                  <li><a href='#'>Sub Option 1.5</a></li>
                  <li><a href='#'>Sub Option 1.6</a></li>
                  <li><a href='#'>Sub Option 1.7</a></li>
                  <li><a href='#'>Sub Option 1.8</a></li>
                  <li><a href='#'>Sub Option 1.9</a></li>
               </ul>
            </div>
         </li>
         <li>
            <a href="" onclick="return false">Sub Menu 2</a>
            <div class='sub-container'>
               <ul class='sub-menu'>
                  <li><a href='#'>Sub Option 2.1</a></li>
                  <li><a href='#'>Sub Option 2.2</a></li>
                  <li><a href='#'>Sub Option 2.3</a></li>
                  <li><a href='#'>Sub Option 2.4</a></li>
                  <li><a href='#'>Sub Option 2.5</a></li>
                  <li><a href='#'>Sub Option 2.6</a></li>
                  <li><a href='#'>Sub Option 2.7</a></li>
                  <li><a href='#'>Sub Option 2.8</a></li>
                  <li><a href='#'>Sub Option 2.9</a></li>
               </ul>
            </div>
         </li>
         <li>
            <a href="" onclick="return false">No Sub Menu 1</a>
         </li>
         <li>
            <a href="" onclick="return false">No Sub Menu 2</a>
         </li>
      </ul>
   </div>
</div>
＆＃13;
＆＃13;
＆＃13;

感谢各种帮助！提前谢谢。

Answer 1

#menu {
     float: left;
}
 #menu ul.top-menu {
     list-style: none;
     padding: 0;
}
 #menu ul.top-menu li {
     display: inline-block;
     float: left;
     margin: 0 5px;
     position: relative;
     font-family: 'Roboto', sans-serif;
     font-size: 18px;
}
 #menu ul.top-menu li a {
     margin: 0;
     padding: 0 5px;
     font-weight: 400;
     font-size: 18px;
     color: black;
     display: inline-block;
     text-decoration: none !important;
     outline: none;
    padding-top: 10px;
    padding-bottom: 10px;
     
}
 #menu ul.top-menu li a:hover {
     color: green;
}
 #menu ul.top-menu li:hover div.sub-container {
     display: block;
}
 #menu .sub-container {
     display: none;
     position: absolute;
     top: 39px;
     left: -20px;
     width: 400px;
     background: black;
     border-top: 2px solid green;
     z-index: 10;
}
 #menu .sub-container ul.sub-menu {
     padding: 10px;
     overflow: hidden;
}
 #menu .sub-container ul.sub-menu li {
     width: 30%;
     float: left;
     margin: 0 1.65%;
}
 #menu .sub-container ul.sub-menu li:hover {
     background-color: green;
     color:white;
}
 #menu .sub-container ul.sub-menu li a {
     color:white;
     height: 30px;
     line-height: 30px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     padding: 0 10px;
     display: block;
     border-bottom: none !important;
}

<div class="container">
   <div id="menu">
      <ul class="top-menu">
         <li>
            <a href="" onclick="return false">Sub Menu 1</a>
            <div class='sub-container'>
               <ul class='sub-menu'>
                  <li><a href='#'>Sub Option 1.1</a></li>
                  <li><a href='#'>Sub Option 1.2</a></li>
                  <li><a href='#'>Sub Option 1.3</a></li>
                  <li><a href='#'>Sub Option 1.4</a></li>
                  <li><a href='#'>Sub Option 1.5</a></li>
                  <li><a href='#'>Sub Option 1.6</a></li>
                  <li><a href='#'>Sub Option 1.7</a></li>
                  <li><a href='#'>Sub Option 1.8</a></li>
                  <li><a href='#'>Sub Option 1.9</a></li>
               </ul>
            </div>
         </li>
         <li>
            <a href="" onclick="return false">Sub Menu 2</a>
            <div class='sub-container'>
               <ul class='sub-menu'>
                  <li><a href='#'>Sub Option 2.1</a></li>
                  <li><a href='#'>Sub Option 2.2</a></li>
                  <li><a href='#'>Sub Option 2.3</a></li>
                  <li><a href='#'>Sub Option 2.4</a></li>
                  <li><a href='#'>Sub Option 2.5</a></li>
                  <li><a href='#'>Sub Option 2.6</a></li>
                  <li><a href='#'>Sub Option 2.7</a></li>
                  <li><a href='#'>Sub Option 2.8</a></li>
                  <li><a href='#'>Sub Option 2.9</a></li>
               </ul>
            </div>
         </li>
         <li>
            <a href="" onclick="return false">No Sub Menu 1</a>
         </li>
         <li>
            <a href="" onclick="return false">No Sub Menu 2</a>
         </li>
      </ul>
   </div>
</div>

Answer 2

这将解决主要问题，这也适用于项color stays green hover submenu。

#menu {
    float: left;
}
 #menu ul.top-menu {
     list-style: none;
     padding: 0;
}
 #menu ul.top-menu li {
     display: inline-block;
     float: left;
     margin: 0 5px;
     position: relative;
     font-family: 'Roboto', sans-serif;
     font-size: 18px;
}
 #menu ul.top-menu > li {
     padding-bottom: 10px;
}
 #menu ul.top-menu li a {
     margin: 0;
     padding: 0 5px;
     font-weight: 400;
     font-size: 18px;
     color: black;
     display: inline-block;
     text-decoration: none !important;
     outline: none;
}
 #menu ul.top-menu li:hover a {
     color: green;
}
 #menu ul.top-menu li:hover div {
     display: block;
}
 #menu .sub-container {
     display: none;
     position: absolute;
     top: 32px;
     left: -20px;
     width: 400px;
     background: black;
     border-top: 2px solid green;
     z-index: 10;
}
 #menu .sub-container ul.sub-menu {
     padding: 10px;
     overflow: hidden;
}
 #menu .sub-container ul.sub-menu li {
     width: 30%;
     float: left;
     margin: 0 1.65%;
}
 #menu .sub-container ul.sub-menu li:hover {
     background-color: green;
     color: white;
}
 #menu .sub-container ul.sub-menu li a {
     color:white;
     height: 30px;
     line-height: 30px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     padding: 0 10px;
     display: block;
     border-bottom: none !important;
}

<div class="container">
   <div id="menu">
      <ul class="top-menu">
         <li>
            <a href="" onclick="return false">Sub Menu 1</a>
            <div class='sub-container'>
               <ul class='sub-menu'>
                  <li><a href='#'>Sub Option 1.1</a></li>
                  <li><a href='#'>Sub Option 1.2</a></li>
                  <li><a href='#'>Sub Option 1.3</a></li>
                  <li><a href='#'>Sub Option 1.4</a></li>
                  <li><a href='#'>Sub Option 1.5</a></li>
                  <li><a href='#'>Sub Option 1.6</a></li>
                  <li><a href='#'>Sub Option 1.7</a></li>
                  <li><a href='#'>Sub Option 1.8</a></li>
                  <li><a href='#'>Sub Option 1.9</a></li>
               </ul>
            </div>
         </li>
         <li>
            <a href="" onclick="return false">Sub Menu 2</a>
            <div class='sub-container'>
               <ul class='sub-menu'>
                  <li><a href='#'>Sub Option 2.1</a></li>
                  <li><a href='#'>Sub Option 2.2</a></li>
                  <li><a href='#'>Sub Option 2.3</a></li>
                  <li><a href='#'>Sub Option 2.4</a></li>
                  <li><a href='#'>Sub Option 2.5</a></li>
                  <li><a href='#'>Sub Option 2.6</a></li>
                  <li><a href='#'>Sub Option 2.7</a></li>
                  <li><a href='#'>Sub Option 2.8</a></li>
                  <li><a href='#'>Sub Option 2.9</a></li>
               </ul>
            </div>
         </li>
         <li>
            <a href="" onclick="return false">No Sub Menu 1</a>
         </li>
         <li>
            <a href="" onclick="return false">No Sub Menu 2</a>
         </li>
      </ul>
   </div>
</div>