在DIV上重叠UL标签

Question

我不是那么专业的CSS。在我的知识中，我尽我所能。这是我的HTML：

<div id="demo_box">
<div id="pop_ctrl"><i class="fa fa-bars"></i></div>
<ul id="demo_ul">
<li class="demo_li">
<div><i class="fa fa-home"></i></div>
<div>Home</div>
</li>
<li class="demo_li">
<div><i class="fa fa-cloud"></i></div>
<div>Cloud</div>
</li>
<li class="demo_li">
<div><i class="fa fa-cog"></i></div>
<div>settings</div>
</li>
<li class="demo_li">
<div><i class="fa fa-envelope"></i></div>
<div>E-mail</div>
</li>
<li class="demo_li">
<div><i class="fa fa-clock-o"></i></div>
<div>Clock</div>
</li>
<li class="demo_li">
<div><i class="fa fa-folder"></i></div>
<div>Files</div>
</li>
<li class="demo_li">
<div><i class="fa fa-heart-o"></i></div>
<div>Favourites</div>
</li>
<li class="demo_li">
<div><i class="fa fa-mobile"></i></div>
<div>Mobile</div>
</li>
<li class="demo_li">
<div><i class="fa fa-power-off"></i></div>
<div>Exit</div>
</li>
</ul>
</div>
Hello

我想在下面的任何内容上显示UL菜单。在这个例子中它的“你好”。 但是当菜单打开时，当前“Hello”会降低。我尝试了其他SO问题的例子，但它们没有用。您可以在https://jsfiddle.net/o8x59caz/

找到完整的代码

Answer 1

将e.PreventDefault与position:absolute

一起使用

top

DEMO

需要#demo_ul{ position:absolute !important; top:0; margin: 0px; } 才能覆盖!important插件的position:relative。