floating sub menu contains on its parent instead of overlapping the parent - html

Question

Below is my snippet. First, I have two different link which triggered a drop down sub menu when hovered. Now the problem is, If you hover on the "First menu" (this is a fixed position), its drop down sub menu does not overlap like the second drop down sub menu from the second menu, it contains itself to its parent which seem's ugly, any ideas, help, clues, suggestions, recommendations to fix this please?
a{text-decoration:none;color:#000000;}
ul,li{list-style:none;padding:0px;}
#menu{overflow-y:auto;overflow-x:hidden;max-height:50px;background:#ededed;color:#ffffff !important;padding:15px;position:fixed;width:300px}
.sub_menu{
position:absolute;
z-index:99999999999;
background:red;
padding:15px;
color:#000000;
display:none;
}
.d_menu a:hover + .sub_menu{display:block !important;}
#menu2{overflow-y:auto;overflow-x:hidden;max-height:50px;background:#ededed;color:#ffffff !important;padding:15px;margin-top:50px;}
<div id="menu">
<ul class="d_menu">
<li>
This is first menu, this has a fixed position
<ul class="sub_menu">
<li>sub menu 1</li>
<li>sub menu 2</li>
<li>sub menu 3</li>
<li>sub menu 4</li>
<li>sub menu 5</li>
<li>sub menu 6</li>
<li>sub menu 7</li>
<li>sub menu 8</li>
<li>sub menu 9</li>
<li>sub menu 10</li>
</ul>
</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
</ul>
</div>
<br>
<br>
<div id="menu2">
<ul class="d_menu">
<li>
This is second menu, this has a static position
<ul class="sub_menu">
<li>sub menu 1</li>
<li>sub menu 2</li>
<li>sub menu 3</li>
<li>sub menu 4</li>
<li>sub menu 5</li>
<li>sub menu 6</li>
<li>sub menu 7</li>
<li>sub menu 8</li>
<li>sub menu 9</li>
<li>sub menu 10</li>
</ul>
</li>
</ul>
</div>

Answer 1

You just have to remove overflow-y and overflow-x and it will work :
a{text-decoration:none;color:#000000;}
ul,li{list-style:none;padding:0px;}
#menu{max-height:50px;background:#ededed;color:#ffffff !important;padding:15px;position:fixed;width:300px}
.sub_menu{
position:absolute;
z-index:99999999999;
background:red;
padding:15px;
color:#000000;
display:none;
}
.d_menu a:hover + .sub_menu{display:block !important;}
#menu2{overflow-y:auto;overflow-x:hidden;max-height:50px;background:#ededed;color:#ffffff !important;padding:15px;margin-top:50px;}
<div id="menu">
<ul class="d_menu">
<li>
This is first menu, this has a fixed position
<ul class="sub_menu">
<li>sub menu 1</li>
<li>sub menu 2</li>
<li>sub menu 3</li>
<li>sub menu 4</li>
<li>sub menu 5</li>
<li>sub menu 6</li>
<li>sub menu 7</li>
<li>sub menu 8</li>
<li>sub menu 9</li>
<li>sub menu 10</li>
</ul>
</li>
</ul>
</div>
<br>
<br>
<div id="menu2">
<ul class="d_menu">
<li>
This is second menu, this has a static position
<ul class="sub_menu">
<li>sub menu 1</li>
<li>sub menu 2</li>
<li>sub menu 3</li>
<li>sub menu 4</li>
<li>sub menu 5</li>
<li>sub menu 6</li>
<li>sub menu 7</li>
<li>sub menu 8</li>
<li>sub menu 9</li>
<li>sub menu 10</li>
</ul>
</li>
</ul>
</div>