html - float 子菜单包含在其父级上而不是与父级重叠

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>