使用CSS和指针将子菜单居中

我一整天都在阅读和搜索。我甚至读过书，试图把它写出来，但没有成功

所以，我想做的是一个CSS菜单，带有子菜单，子菜单以页面为中心。我想要的是子菜单完全以页面为中心显示。这可能吗

以下是HTML：

<div id="menu_panel">
  <div id="menu_2border">
    <div id="menu_section">
      <div id='menu1'>
        <ul>
          <li class='first sub'><a href='#'><span>Hem</span></a>
            <ul>
              <li><a href='#'><span>Privat</span></a></li>
              <li><a href='#'><span>Om Robust</span></a></li>
            </ul>
          </li>
          <li class='sub'><a href='#'><span>Koncept</span></a>
            <ul>
              <li><a href='#'><span>Insikt</span></a></li>
              <li><a href='#'><span>Koncept</span></a></li>
              <li><a href='#'><span>Aktivering</span></a></li>
            </ul>
          </li>
          <li class='sub'><a href='#'><span>Uppdrag</span></a>
            <ul>
              <li><a href='#'><span>Företag</span></a></li>
              <li><a href='#'><span>Privat</span></a></li>
            </ul>
          </li>
          <li class='sub'><a href='#'><span>Blogg</span></a>
            <ul>
              <li><a href='#'><span>Arkiv</span></a></li>
              <li><a href='#'><span>Kategori</span></a></li>
            </ul>
          </li>
          <li class='sub'><a href='#'><span>Om Robust</span></a>
            <ul>
              <li><a href='#'><span>Vad erbjuder vi?</span></a></li>
              <li><a href='#'><span>Vilka är vi?</span></a></li>
            </ul>
          </li>
          <li class='sub'><a href='#'><span>Kontakter</span></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div> 

请注意，菜单的每个项目中都有指向箭头，它们应该保持在原来的位置。应该居中的是大的子菜单矩形

---

非常感谢

您需要将

绝对

定位应用于下拉菜单，并通过仅对其应用

相对

定位，使其与顶级菜单相关。这种直接关系意味着您可以将下拉菜单设置为

left:0

和

right:0

，将其分别粘贴到顶级菜单的最左侧和最右侧，而不管它在HTML中的显示位置如何（即，它将匹配顶级

ul

）

---

由于您已将

position:relative

设置为许多项，并且您的一些代码可能依赖于此，因此我无法轻松更改代码以使其正常工作。然而，我将这个快速演示放在一起，以说明我的解释。希望能有帮助。

我不太明白你的处境，你需要这样的东西吗？如果是的话，我会清楚了解

#menu1 .sub ul { /* faz o formato das caixas do sub-menu */
 display: none;
 position: absolute;
 width: 803px;
 height: 189px;
 margin-left: -401.5px; /* width divided by 2 */
 left: 50%;
 border-bottom: #dddddd 1px solid;
 border-left: #dddddd 1px solid;
 border-right: #dddddd 1px solid;
 background: #FFF;
}

---

/

这可能会对你有所帮助，谢谢Sachin，但没有帮助。我无法使它适应我的情况。我知道我可以用jQuery做我想做的菜单，但我只想用CSS。不，差不多，但不是那样。无论我用鼠标悬停在哪个按钮上，#menu1.sub ul都不应该改变位置。我真的不知道如何更好地解释它。。。子菜单矩形必须始终保持页面居中，无论我用鼠标悬停在哪里…agriboz，它工作得很好，除了现在第一级菜单项下的箭头消失了。。。我无法解决这个问题，也许我已经花了太多的时间来研究它，需要休息一下，你知道发生了什么吗？这是一段应该执行箭头操作的代码：

#menu1>ul>li:hover:after{content:''；display:block；width:0；height:0；position:relative；left:50%；bottom:0；border left:8px solid transparent；border right:8px solid transparent；border bottom:7px solid\fff；margin left:-5px；}

我不明白。我做的和你的例子（复制/粘贴）完全一样，但是当我保存并上传它时，结果不一样。。。现在，矩形（菜单的第2级）稍微有点不合适（左侧约20px）。任何关于我的错误的线索？你需要给出

ul

s

padding:0

。我检查了JSFIDLE上的标记，以使浏览器的行为更加一致。漂亮的abriboz！！！！！！我不知道如何感谢你，除了说声谢谢！！你是老板！！！非常感谢你，约翰！我确实试过你的方法，但从那一刻起，我把

放对了：0

我的2级菜单的宽度比菜单的要大。幸运的是，我已经设法解决了这个问题，您可以检查我已经标记为正确的第一个答案。

#menu1 .sub ul { /* faz o formato das caixas do sub-menu */
 display: none;
 position: absolute;
 width: 803px;
 height: 189px;
 margin-left: -401.5px; /* width divided by 2 */
 left: 50%;
 border-bottom: #dddddd 1px solid;
 border-left: #dddddd 1px solid;
 border-right: #dddddd 1px solid;
 background: #FFF;
}