制作“向上展开”的下拉菜单

Question

我正在尝试实现一个下拉菜单。作为起点，我使用了一个已有的基于HTML/CSS/jQuery构建的下拉菜单，该菜单是基于CSS trick's Simple jQuery Dropdowns创建的。（因为我无法在触摸设备上使用纯CSS菜单，因为它们依赖于悬停状态。）

我已经通过调整ul.dropdown ul {top: -100%; }取得了一些进展，但这只能将下拉菜单向上移动一行，我不确定这是否是语义化的CSS。

你有什么想法可以帮助我实现这个功能吗？

这里有一个jsfiddle示例：http://jsfiddle.net/TTTb6/

- sam

Answer 1

尝试更改这个：

ul.dropdown ul {
    bottom: 100%;
}

Updted jsfiddle

- DarkAjax

---

没问题，这是一段很长的代码，这种事情很容易被忽视 :) - DarkAjax

我注意到的唯一怪事是菜单现在是反向的 - 即 CSS 中的第一项现在变成了最后一项，但这并不是一个特别的问题，因为你可以只需将列表倒过来编写。 - sam

Answer 2

不要使用top，而是使用bottom: 100%;：

ul.dropdown ul {
    position: absolute;
    bottom: 100%;
}

- Derek Henderson

Answer 3

对于触摸设备，您需要在点击事件中编写代码。请查看此处，您将得到答案...

单击以关闭jQuery下拉菜单，在保留其他行为的同时在移动设备上

- Jilani J

---

当然需要触发事件。OP知道这一点。OP询问的是关于元素的样式（定位），而不是如何触发事件。 - Derek Henderson