如何自定义下拉菜单

Question

我有一个jQuery下拉列表，但我的div奇怪地对齐了。目前，下拉列表的父div位于页面的右上角，红色下拉列表朝向屏幕末端对齐。如何对齐下拉列表以使其右侧与箭头的右边界对齐？

以下是当前行为：

这是我的CSS：

#jsddm {
    margin:0;
    padding:0;
}
#jsddm li {
    float:left;
    list-style:none;
    font:12px Tahoma,Arial;
}
#jsddm li a {
    display:block;
    padding:13px 12px;
    text-align:left;
    text-decoration:none;
    white-space:nowrap;
}
#jsddm li a:hover {
    border:1px solid #333;
    padding:13px 12px;
    text-align:left;
    text-decoration:none;
    white-space:nowrap;
}
#jsddm li ul {
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
    border-top:1px solid white;
}
#jsddm li ul li {
    float:none;
    display:inline;
}
#jsddm li ul li a {
    width:auto;
    background:#9F1B1B;
}
#jsddm li ul li a:hover {
    background: #7F1616;
}

Answer 1

尝试将以下内容添加到现有的CSS选择器::

#jsddm li {
    position:relative;
}

#jsddm li ul { 
    right:0;
}

实时示例（使用简化标记，因为撰写本文时您的HTML未包含在内）：

http://jsfiddle.net/u6QtX/2/