如何将嵌套的<ul>正确放置在水平滚动<ul>上方作为"弹出"菜单？Chrome和IE的问题

Question

我正在尝试创建一个水平滚动菜单,它也有弹出子菜单项,我正在努力解决一些问题.

我在这里找到了一个类似的主题,但是当我尝试利用设置位置的建议答案时:相对; 在绝对定位元素的父级(在这种情况下是"弹出"菜单)然后我遇到溢出问题.

这是一个小提琴,所以你可以看到我遇到了什么,并可能提供一些反馈.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

我不久前遇到了类似的问题，这个链接帮助我解决了这个问题。主要的一点是将你的子菜单包装在一个包装类中，该包装类将作为它们的定位祖先（因为现在看来你的整个内联块正在这样做，这是你不想要的）。