Hoverable Dropdown Menu closes once you hover over the Dropdown Menu - html

Question

I'm trying to make a dropdown menu that opens when you hover over an item. But i have two problems:
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.
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>
Sub Menu 1
<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>
Sub Menu 2
<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>
No Sub Menu 1
</li>
<li>
No Sub Menu 2
</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>
Sub Menu 1
<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>
Sub Menu 2
<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>
No Sub Menu 1
</li>
<li>
No Sub Menu 2
</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>
Sub Menu 1
<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>
Sub Menu 2
<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>
No Sub Menu 1
</li>
<li>
No Sub Menu 2
</li>
</ul>
</div>
</div>