小编Has*_*n84的帖子

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

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

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