Hoverable Dropdown Menu closes once you hover over the Dropdown Menu

Question

I'm trying to make a dropdown menu that opens when you hover over an item. But i have two problems:

1. When my mouse leaves the item the div goes away, so i'd like the div to be shown as long as i hover either over the item or the dropdownmenu.
2. This problem goes hand in hand with the first i believe. It's that the item text should keep a green color as long as you hover over it or the dropdown menu (currently it only does while you hover the item).

Here is the code i've tried so far:

#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;
}

<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>

Every kind of help is appreciated! Thanks in advance.

Answer 1

This will fix the main problem and also this will work with items color stays green while hover the 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>

Answer 2

#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>