Html 如何正确定位嵌套的<；ul>；在水平滚动条上方<；ul>；作为一个「；弹出窗口；菜单？Chrome和IE的问题

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

我发现了一个类似的话题，但当我试图利用设置位置的建议答案时：相对；在绝对定位元素（在本例中为“弹出”菜单）的父元素上，我遇到了溢出问题

所以你可以看到我遇到了什么，也许可以提供一些反馈。Firefox可以正常工作，但IE和Chrome都存在“四”和更高版本的弹出菜单位置问题

请注意，将鼠标移到黄色框上会在该元素正上方显示一个弹出菜单，但当您向右滚动并开始在元素上移动鼠标时，弹出菜单不再正确对齐。我试图将主

的位置设置为“相对”，但这时我遇到了弹出窗口不显示的问题（即使将“底部”调整为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>

---

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

.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;
}