html - 在页面上居中下拉菜单

Question

我的引导主页中有一个顶部栏下拉菜单。下拉菜单在每个菜单项下开始。我想在页面上居中下拉菜单。（应该从我的内容区域的左侧开始到右侧结束，即 1280 像素）

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

希望这可以帮助。