将div选项卡与另一个div标签对齐

Question

由于Chris Moutray，我有以下脚本几乎完美无缺。

jQuery的：

$('.navigation3').click(function(event) {
    var $nav3 = $(this),
        $dd = $nav3.next('.dropdown');

    $nav3.toggleClass('active');

    var offset = 20,
        offsettop = $nav3.offset().top + $nav3.height() + offset,
        offsetleft = $nav3.offset().left;

    $dd.css({
        top: offsettop,
        left: offsetleft
    });

    $nav3.hasClass('active') ? $dd.show() : $dd.hide();
});​

问题：

唯一的问题是.dropdown正在显示，因此.dropdown的左上角位于.navigation3左下角的旁边。

所以基本上，.dropdown的唇部应位于左侧。此刻，嘴唇位于右侧。

问题：

如何让.dropdown'的右上角与.navigation3 s的右下角对齐？

jsfiddle示例：

http://jsfiddle.net/MTESY/19/

Answer 1

你可以尝试这样：

var leftoffset = $dd.width() - $nav3.width();

var offset = 20,
    offsettop = $nav3.offset().top + $nav3.height() + offset,
    offsetleft = $nav3.offset().left-leftoffset ;

http://jsfiddle.net/MTESY/20/

Answer 2

您可能需要考虑使用更少语法的方式来编写具有较少CSS和jQuery的菜单 - DEMO

的 HTML 的

<ul id="menu">
    <li>click me 1
        <ul>
            <li>icon Default 1</li>
        </ul>
    </li>
    <li>click me 2
        <ul>
            <li>icon Default 2</li>
        </ul>
    </li>
    <li>click me 3
        <ul>
            <li>icon Default 3</li>
        </ul>
    </li>
</ul>

的的jQuery 的

$("#menu > li").on("click", function() {
    var $ul = $(this).find("ul");
    if ( $ul.is(":hidden") ) { $ul.show(); } else { $ul.hide(); }
});

的 CSS

#menu {
    float: right;
    background:#555;
}

#menu li {
    float:left;
    padding:10px;
    cursor:pointer;
    position: relative;
}

#menu li ul {
    display: none;
    position: absolute;
    top: 40px;
    right: 0;
    white-space: nowrap;
    background: #c00;
}