html - 如何将嵌套 <ul> 正确定位在水平滚动 <ul> 上方作为 "pop-up"菜单？ Chrome 和 IE 的问题

Question

我正在尝试创建一个水平滚动菜单，该菜单也有弹出式子菜单项，但我正在努力解决一些问题。

我找到了一个类似的话题here ，但是当我尝试利用设置位置的建议答案时:相对；在绝对定位元素(在本例中为“弹出式”菜单)的父级上，然后我遇到了溢出问题。

Here is a fiddle这样您就可以看到我遇到的问题并可能提供一些反馈。 Firefox 按原样运行良好，但 IE 和 Chrome 都存在“四”弹出菜单的位置问题以及向右滚动时的问题。

请注意，将鼠标悬停在黄色框上会在该元素正上方显示一个弹出菜单，但是当您向右滚动并开始将鼠标悬停在元素上时，弹出菜单不再正确对齐。我试图设置主要的位置 <ul>到“相对”，但那是当我遇到弹出窗口没有显示的问题时(即使在将“底部”调整为 100px 以外的其他内容之后)。

HTML

<div class="modal">
<div class="modal-container">
  <div class="modal-outer">
    <div class="modal-inner">
      <div class="project_navigation">
         <ul>
           <li><a href="#">One</a>
             <ul>
               <li><a href="#">One A</a></li>
               <li><a href="#">One B</a></li>
               <li><a href="#">One C</a></li>
               <li><a href="#">One D</a></li>
             </ul>
           </li>
           <li><a href="#">Two</a>
             <ul>
               <li><a href="#">Two A</a></li>
               <li><a href="#">Two B</a></li>
               <li><a href="#">Two C</a></li>
               <li><a href="#">Two D</a></li>
             </ul>
           </li>
           <li><a href="#">Three</a>
             <ul>
               <li><a href="#">Three A</a></li>
               <li><a href="#">Three B</a></li>
               <li><a href="#">Three C</a></li>
               <li><a href="#">Three D</a></li>
             </ul>
           </li>
           <li><a href="#">Four</a>
             <ul>
               <li><a href="#">Four A</a></li>
               <li><a href="#">Four B</a></li>
               <li><a href="#">Four C</a></li>
               <li><a href="#">Four D</a></li>
             </ul>
           </li>
           <li><a href="#">Five</a>
             <ul>
               <li><a href="#">Five A</a></li>
               <li><a href="#">Five B</a></li>
               <li><a href="#">Five C</a></li>
               <li><a href="#">Five D</a></li>
             </ul>
           </li>
           <li><a href="#">Six</a>
             <ul>
               <li><a href="#">Six A</a></li>
               <li><a href="#">Six B</a></li>
               <li><a href="#">Six C</a></li>
               <li><a href="#">Six D</a></li>
             </ul>
           </li>
           <li><a href="#">Seven</a>
             <ul>
               <li><a href="#">Seven A</a></li>
               <li><a href="#">Seven B</a></li>
               <li><a href="#">Seven C</a></li>
               <li><a href="#">Seven D</a></li>
             </ul>
           </li>
           <li><a href="#">Eight</a>
             <ul>
               <li><a href="#">Eight A</a></li>
               <li><a href="#">Eight B</a></li>
               <li><a href="#">Eight C</a></li>
               <li><a href="#">Eight D</a></li>
             </ul>
           </li>
           <li><a href="#">Nine</a>
             <ul>
               <li><a href="#">Nine A</a></li>
               <li><a href="#">Nine B</a></li>
               <li><a href="#">Nine C</a></li>
               <li><a href="#">Nine D</a></li>
             </ul>
           </li>
           <li><a href="#">Ten</a>
             <ul>
               <li><a href="#">Ten A</a></li>
               <li><a href="#">Ten B</a></li>
               <li><a href="#">Ten C</a></li>
               <li><a href="#">Ten D</a></li>
             </ul>
           </li>
         </ul>
      </div>
    </div>
  </div>
</div>
</div>

CSS

.modal {
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    left: 0;
    top: 0;
    position: absolute;
    margin-left: 0px;
    background-repeat: no-repeat;
    color: #fff;
    background: #4c3416;
    background: rgba(76, 52, 22, 0.65);
    text-align: left;
    opacity: 1;
    z-index: 1050;
}
.modal-container {
  margin-left: 0;
    left: auto;
    height: 125px;
    position: fixed;
    top: auto;
    bottom: 0;
    width: 100%;
    background: #4c3416;
    border-radius: 0;
    right: auto;
    color: #4c3416;
    min-height: initial;
}
.modal-outer {
  padding: 5px;
  min-height: initial;
  background-color: blue;
}

.modal-inner {
  width: 300px;
  margin: 0 auto;
  background-color: lightblue;
}

.project_navigation {
  overflow-x: auto;
  white-space: nowrap;
  background-color: white
  list-style: none;
}

.project_navigation > ul > li {
  display: inline-block;
  vertical-align: top;
  height: 50px;
  width: 50px;
  padding: 5px;
  margin: 5px;
  background-color: yellow;
}

.project_navigation > ul > li > ul {
  display: none;
  list-style: none;
}

.project_navigation > ul > li:hover > ul {
  display: block;
  position: absolute;
  bottom: 100px;
  left: auto;
  width: 125px;
  height: auto;
  background-color: #00ff99;
}

Answer 1

前一段时间我遇到了类似的问题，this link帮我整理了一下。要点是将您的子菜单包装在一个包装器类中，该包装器类将用作它们的定位祖先(因为现在看来您的整个内联 block 正在执行此操作，这是您不想要的)。