jquery - 定位下拉菜单

Question

我的下拉菜单的功能运行良好。但是，我无法定位掉落的物品。我已经定位了下拉的项目，但是当我在更大的屏幕上查看它时，这些项目的定位就好像仍然在更小的屏幕上一样。

http://jsfiddle.net/sArTd/1/

下拉菜单在 jsFiddle 中工作正常，但是如果您取消注释 HTML 部分中的“测试”并重试，您将看到我的问题是什么。如果下拉项的父项向左或向右移动，则下拉项不跟随！

如您所见，我曾经使用过：left:..定位下拉项目，所以我认为这可能是问题所在，我不确定如何正确定位它！

Answer 1

用 ul list 包裹你的菜单链接和菜单列表。（如果我理解你的问题没有错）

HTML

<ul class="main">
    <li><a href ='#' >Test </a></li>
    <li><a href ='#' >Test </a></li>
    <li><a href ='#' >Test </a></li>
    <li><a href ='#' >Test </a></li>
    <li><a href ='#' id="Notification">Notifcations</a>
        <ul id="popOut1">
            <li><a href='#'>Dropped</a>
            </li>
        </ul> 
    </li>
    <li><a href='#' id="Settings">\/</a>
        <ul id="popOut2">
            <li><a href="#">Settings</a>
            </li>
            <li><a href="#">Logout</a>
            </li>
        </ul>
       </li>
</ul>

CSS

ul.main, li{
        list-style: none;
    margin: 0;
    padding: 0; display:inline-block;
    background:red;
    position:relative
}

演示

Answer 2

你应该重写你的结构，

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

这样你就可以添加position:relativeli 和 left:0 将它放在正确的位置

Answer 3

定位菜单的最佳方式是使用 jQuery，因为您可以动态响应 UI 更改，例如窗口大小调整等。

我推荐如下内容：

$opener.on("click", function() {
    $menu.show();
    $menu.css({
        top: $opener.position().top + $opener.outerHeight() + 'px',
        left: $opener.position().left + 'px'
    });
});

然后菜单必须是position: absolute两者的容器position: relative。