floating sub menu contains on its parent instead of overlapping the parent
<p>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? </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="menu"&gt;
  &lt;ul class="d_menu"&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;This is first menu, this has a fixed position&lt;/a&gt;
      &lt;ul class="sub_menu"&gt;
        &lt;li&gt;&lt;a href="#"&gt;sub menu 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;sub menu 2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;sub menu 3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;sub menu 4&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;sub menu 5&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;sub menu 6&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;sub menu 7&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;sub menu 8&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;sub menu 9&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;sub menu 10&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;menu 2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;menu 3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;menu 4&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;menu 5&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;br&gt;
&lt;br&gt;
&lt;div id="menu2"&gt;
  &lt;ul class="d_menu"&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;This is second menu, this has a static position&lt;/a&gt;
      &lt;ul class="sub_menu"&gt;
        &lt;li&gt;&lt;a href="#"&gt;sub menu 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;sub menu 2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;sub menu 3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;sub menu 4&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;sub menu 5&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;sub menu 6&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;sub menu 7&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;sub menu 8&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;sub menu 9&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;sub menu 10&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>