javascript - 如何对齐列表下拉列表

Question

我在菜单中有一个下拉菜单。但它没有按照我需要的方式下降。
但我需要将其作为菜单项对齐。就像在这里:

可以简单地用css来完成吗？
html

<li class="dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Account<b class="caret" style="float: right;"></b></a>
    <ul class="dropdown-menu">
        <li><a href="{% url 'account' %}">Account Info</a></li>
        <li><a href="{% url 'dev_billing' %}">Billing Settings</a></li>
        <li><a href="{% url 'dev_logout' %}" >Sign out</a></li>
    </ul>
</li>  

CSS:

.dropdown-menu {
    background-color: black;
    min-width: 100px;
    width: 160px;
}
.dropdown-menu > li {
    align: center;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    color: #cfeffd;
    background-color: #333333;
    background-image: none;
    filter: none;
}

.dropdown-toggle {
    min-width: 100px;
    width: 125px;
}

.caret {
    marging-left: 30px;
}

Answer 1

你可以通过设置 position:relative 到 ".dropdown"和 position: absolute 到 ".dropdown-menu"和他的宽度到 100% 来实现。

li {
  padding: 10px 20px;
}

.dropdown {
    position: relative;
    display: block;
    background-color: #ff0;
    width: 120px;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: gray;
}

这是一个工作示例:

http://jsfiddle.net/5CB4Q/3/