CSS 居中菜单

Question

我正在使用 jquery 插件创建下拉菜单 - http://dev7studios.com/dropit/#

HTML 和 CSS 如下所示。

问题是我无法在包装器 div 中将菜单(和下拉项)居中

   <ul class="menu">
    <li>
        <a href="#">Dropdown</a>
        <ul>
            <li><a href="#">Some Action 1</a></li>
            <li><a href="#">Some Action 2</a></li>
            <li><a href="#">Some Action 3</a></li>
            <li><a href="#">Some Action 4</a></li>
        </ul>
    </li>
</ul

---

.menu {
    font-size: 12px;
    border: 1px solid #000;
    margin: 0 auto;   // THIS DOES NOT WORK 
    width: 99px;

}

.dropit {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dropit .dropit-trigger { position: relative; }
.dropit .dropit-submenu {
    position: absolute;
    top: 100%;
    left: 0; /* dropdown left or right */
    z-index: 1000;
    display: none;
    min-width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.dropit .dropit-open .dropit-submenu { display: block; }

有人能帮忙吗？

皮特

Answer 1

尝试添加 .dropit-submenu{ left: -33%; } 到你的CSS。

注意:“left”的确切值可能需要根据元素的宽度动态调整 - 它将是元素宽度的 1/3