Перекрытие метки UL на DIV

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 по любому содержанию ниже. В этом примере это «Привет». Но в настоящее время «Привет» сдвигается вниз, когда меню открыто. Я пробовал примеры других вопросов, но они не работают. Вы можете найти полный код по адресу: https://jsfiddle.net/o8x59caz/

Answer 1

Использование position:absolute с top

#demo_ul{ 
    position:absolute !important; 
    top:0; 
    margin: 0px; 
} 

DEMO

!important необходимо переопределить position:relative в popmenu.js плагин.