Question

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

我在使用此导航栏的几个部分时遇到问题，请看一下这个小提琴http://jsfiddle.net/spryno724/uARnf/：

我无法将下拉菜单的右侧与菜单触发器的右侧对齐。
当用户点击菜单外部并触发菜单时，如何让菜单消失？
[BONUS !!!]加载预览框时，您可以执行少量的左/右滚动。这在实际应用中是相同的。我该如何删除？

对于问题的崩溃清单感到抱歉，但我处于一个非常大的问题上。有人可以帮我解决这些问题吗？

感谢您的时间！

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;
    });
});

CSS菜单下拉定位

1 个答案: