плавающее подменю содержит на своем родительском элементе вместо перекрытия родителя

Question

Ниже мой фрагмент. Во-первых, у меня есть две разные ссылки, которые вызывали выпадающее подменю при зависании. Теперь проблема заключается в том, что если вы наводите курсор на «Первое меню» (это фиксированное положение), его выпадающее подменю не перекрывается, как второе выпадающее подменю из второго меню, оно содержит себя в качестве родителя, уродливые, любые идеи, помощь, подсказки, предложения, рекомендации, чтобы исправить это, пожалуйста?

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> 
 
     <a href="#">This is first menu, this has a fixed position</a> 
 
     <ul class="sub_menu"> 
 
     <li><a href="#">sub menu 1</a></li> 
 
     <li><a href="#">sub menu 2</a></li> 
 
     <li><a href="#">sub menu 3</a></li> 
 
     <li><a href="#">sub menu 4</a></li> 
 
     <li><a href="#">sub menu 5</a></li> 
 
     <li><a href="#">sub menu 6</a></li> 
 
     <li><a href="#">sub menu 7</a></li> 
 
     <li><a href="#">sub menu 8</a></li> 
 
     <li><a href="#">sub menu 9</a></li> 
 
     <li><a href="#">sub menu 10</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">menu 2</a></li> 
 
    <li><a href="#">menu 3</a></li> 
 
    <li><a href="#">menu 4</a></li> 
 
    <li><a href="#">menu 5</a></li> 
 
    </ul> 
 
</div> 
 
<br> 
 
<br> 
 
<div id="menu2"> 
 
    <ul class="d_menu"> 
 
    <li> 
 
     <a href="#">This is second menu, this has a static position</a> 
 
     <ul class="sub_menu"> 
 
     <li><a href="#">sub menu 1</a></li> 
 
     <li><a href="#">sub menu 2</a></li> 
 
     <li><a href="#">sub menu 3</a></li> 
 
     <li><a href="#">sub menu 4</a></li> 
 
     <li><a href="#">sub menu 5</a></li> 
 
     <li><a href="#">sub menu 6</a></li> 
 
     <li><a href="#">sub menu 7</a></li> 
 
     <li><a href="#">sub menu 8</a></li> 
 
     <li><a href="#">sub menu 9</a></li> 
 
     <li><a href="#">sub menu 10</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

Вы просто должны удалить overflow-y и overflow-x и он будет работать:

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> 
 
     <a href="#">This is first menu, this has a fixed position</a> 
 
     <ul class="sub_menu"> 
 
     <li><a href="#">sub menu 1</a></li> 
 
     <li><a href="#">sub menu 2</a></li> 
 
     <li><a href="#">sub menu 3</a></li> 
 
     <li><a href="#">sub menu 4</a></li> 
 
     <li><a href="#">sub menu 5</a></li> 
 
     <li><a href="#">sub menu 6</a></li> 
 
     <li><a href="#">sub menu 7</a></li> 
 
     <li><a href="#">sub menu 8</a></li> 
 
     <li><a href="#">sub menu 9</a></li> 
 
     <li><a href="#">sub menu 10</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<br> 
 
<br> 
 
<div id="menu2"> 
 
    <ul class="d_menu"> 
 
    <li> 
 
     <a href="#">This is second menu, this has a static position</a> 
 
     <ul class="sub_menu"> 
 
     <li><a href="#">sub menu 1</a></li> 
 
     <li><a href="#">sub menu 2</a></li> 
 
     <li><a href="#">sub menu 3</a></li> 
 
     <li><a href="#">sub menu 4</a></li> 
 
     <li><a href="#">sub menu 5</a></li> 
 
     <li><a href="#">sub menu 6</a></li> 
 
     <li><a href="#">sub menu 7</a></li> 
 
     <li><a href="#">sub menu 8</a></li> 
 
     <li><a href="#">sub menu 9</a></li> 
 
     <li><a href="#">sub menu 10</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>