定位下拉菜单

我的下拉菜单功能工作正常。但是，我无法定位掉落的项目。我已经定位了掉落的物品，但是当我在一个更大的屏幕上查看时，这些物品仍然位于较小的屏幕上。但是，如果您取消注释出在HTML部分的“测试”，然后再试一次，你会看到我的问题是什么定位下拉菜单

下拉工作中的jsfiddle罚款。如果下拉项目中的父项目向左或向右移动，则下拉项目不会跟随！

正如你可以看到我用了：left:..来定位落下的物品，所以我想这可能是这个问题，我不知道如何正确地定位它！

2013-04-03 rp7

用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

来源

2013-04-03 11:53:36 Sowmya

这几乎是行得通的，但我只需要将我丢弃的物品中的一个稍稍放在左边，这将如何呢？ – rp7

@ user1888378哪个掉落物品要移动到左边？ – Sowmya

所以当我点击\ /例如，我想让下拉菜单稍微向左下方，那么在\/ – rp7

你应该重写你的结构，

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

这样你就可以在李和左加position:relative：0将其放在正确的地方

来源

2013-04-03 11:54:21

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

我建议类似如下：

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

然后在菜单必须是position: absolute和容器Ò f两个position: relative。

来源

2013-04-03 11:55:19 elektronikLexikon

定位下拉菜单

回答

相关问题