Question

我的下拉列表功能正常。但是，我无法定位掉落的项目。我找到了下拉物品但是当我在更大的屏幕上看到它时，物品的位置就好像仍然在较小的屏幕上。

下拉列表在jsFiddle中正常工作但是如果你取消注释HTML部分中的'tests'并再试一次，你会看到我的问题是什么。如果下拉项目中的父项向左或向右移动，则下拉项目不会跟随！

正如您所看到的，我使用了left:..来定位掉落的物品，所以我认为这可能是问题所在，我不确定如何正确定位！

Answer 1

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

<强> 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
}

<强> DEMO

Answer 2

你应该用

重写你的结构

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

通过这种方式，您可以在li和左侧添加position:relative：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的容器。

定位下拉菜单

3 个答案: