将页面上的下拉菜单居中

Question

我的bootstrap主页上有一个顶栏下拉菜单。 下拉菜单从每个菜单项下开始。 我想将dropdownmenu置于页面中心。 （应从左侧开始，到我的内容区右侧1280px结束）

HTML：

        <div class="navbar">
          <div class="navbar-inner">
            <div class="container" style="width: 1280px;">
              <ul class="nav" role="navigation">
                <li class="dropdown">
                  <a id="drop1" href="#" class="dropdown-toggle menuitem" data-toggle="dropdown">nav1</a>
                  <ul class="dropdown-menu" aria-labelledby="drop1" style="width:1180px;">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
                   </ul>
                </li>

            </div>
          </div>
        </div> 

Answer 1

您可以将容器设为relative，让li.dropdown与left:0保持绝对。

CSS：

.container{
    position:relative;
}

li.dropdown ul.dropdown-menu{
    position:absolute;
    left: 0;
    top: 0 /*according to your menu height */
    width: 1280px;
}

希望这会有所帮助。