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

CSS中心菜单

1 个答案: