浮动子菜单包含其父，而不是重叠的父母

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>