jquery - CSS 菜单下拉定位

Question

我正在构建一个导航栏，它将位于我正在开发的 CMS 上每个页面的顶部。此导航栏包含一系列图像和文本链接，其中一些会触发下拉菜单。

我在导航栏的几个部分遇到问题，看看这个 Fiddle http://jsfiddle.net/spryno724/uARnf/ :

1. 我无法使下拉菜单的右侧与菜单触发器的右侧对齐。
2. 当用户点击菜单外部并触发时，如何让菜单消失？
3. [奖励!!!] 当加载预览框架时，您可以进行少量的左/右滚动。这在实际应用中也是一样的。我怎样才能删除它？

对于问题的崩溃列表，我深表歉意，但我遇到了一个非常大的问题。有人可以帮我解决这些问题吗？

感谢您的宝贵时间!

Answer 1

下面的代码应该涵盖您的所有问题。只需将您的 CSS 规则和 jQuery/JavaScript 替换为以下代码即可。现场示例:http://jsfiddle.net/uARnf/5/

CSS:

nav.pluginBar ul.pluginBarRight li {
    display: inline-block;
    *display: inline; /* Invalid CSS, but necessary for IE7 to display each of the unordered list item in-line :( */
    zoom: 1; /* Invalid CSS again, but necessary for IE7 to treat the unordered list item as block-level elements :( */
    vertical-align : top;
    height: 35px;
    color: #999;
    clear: both;
    position: relative; /* Added this */
}

nav.pluginBar ul.pluginBarRight li div {
    background: #2d2d2d;
    width: 250px;
    position: absolute;
    right: 0; /* Added this */
    top: 35px;
    display: none;
}

jQuery:

$(function() {
    $(document).click(function () {
        $('.pluginBarRight li div').hide();
    });  
    $('.pluginBarRight li').click(function () {
        $('.pluginBarRight li div').hide();
        $(this).children('div').show();
        return false;
    });
});