通过偏移定位绝对元素

Question

我在页面上有一个下拉菜单，希望菜单从主项目下拉到左侧。它现在下降到右边。

我在这里有一个jsfiddle。

正如您所看到的，它现在向右下方并调整页面大小以适应。我希望菜单向左下方并保持所有尺寸。有一个简单的方法。我知道jQuery菜单小部件可以做到这一点，但我还有其他问题。

按钮位于页面中间的某个位置，所以理想情况下我希望下拉菜单相对于父项下拉，而不是像jsfiddle显示哪个是固定在右侧。希望这澄清。

CODE：

IN DOC READY

    $(document).ready(function () {
    // Menus
    $('ul.menu').hide();

    $('ul#viewMenu li').hover(function () {
        $(this).children('ul.menu').animate({ opacity: 'show' }, 'slow');
    }, function () {
        $(this).children('ul.menu').animate({ opacity: 'hide' }, 'fast');
    });
    });

CSS

    ul#viewMenu   { overflow: hidden; }

    ul#viewMenu li { float:left; display: block; text-align: left; line-height: 40px; }
    ul#viewMenu li a { line-height: 40px; }

    ul#viewMenu ul.menu { position: absolute; }
    ul#viewMenu ul.menu li { float: none; }

HTML

    <div style="display: inline-block; float: right;">
<ul id="viewMenu" style="list-style: none; margin: 0; padding: 0;">
    <li style="display: block; float: left;"> <a class="nav-button view-type-button" style="text-align: center;" href="#"
        title="Change the things.">
                <span>
                    <img src="~/Content/themes/base/images/empty.png" style="height: 48px; width: 49px;" alt="Things" />
                </span>
            </a>

        <ul class="view-menu-item view-menu-bottom-right menu"
        style="width: 170px !important">
            <li> <a class="nav-button" href="#" title="View data.">
                        <span class="thing1-calendar-button"></span>
                        <span>This 1</span>
                    </a>

            </li>
            <li> <a class="nav-button" href="#" title="View data.">
                        <span class="thing2-calendar-button"></span>
                        <span>This 2</span>
                    </a>

            </li>
            <li> <a class="nav-button" href="#" title="View data.">
                        <span class="thing3-calendar-button"></span>
                        <span>This 3</span>
                    </a>

            </li>
        </ul>
    </li>
</ul>

Answer 1

原来我需要做的就是从jQuery偏移值中获取当前绘制的位置。然后设置绝对元素的CSS位置。简单......当你知道如何！

var position = $('ul#viewMenu ul.menu').offset();

$('ul#viewMenu ul.menu').css({ top: (position.top) + 'px', left: (position.left - 160) + 'px' });

$('ul.menu').hide();

$('ul#viewMenu li').hover(function () {
    $(this).children('ul.menu').animate({ opacity: 'show' }, 'slow');
}, function () {
    $(this).children('ul.menu').animate({ opacity: 'hide' }, 'fast');
});

Answer 2

简单。请举这个：

ul#viewMenu ul.menu {
    position: absolute;
    right: 0;
}

小提琴：http://jsfiddle.net/praveenscience/T8hFW/1/