Overlapping a UL tag on a DIV

Question

I am not so pro in CSS. I tried whatever I can in my knowledge. I want to display the UL menu over any content below. In this example its "Hello". But currently "Hello" shifts down when the menu is opened. I tried examples of other SO questions but they are not working. You can find the complete code at:

$(function() {
  $('#demo_box').popmenu({
    'controller': 'true',
    'width': '100%',
    'background': '#800000',
    'focusColor': 'black',
    'borderRadius': '10px',
    'top': '0',
    'left': '0',
    'iconSize': '50px'
  });
})

.demo_li {
  padding: 10px;
  word-wrap: break-word;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://www.jqueryscript.net/demo/Simple-jQuery-Popup-Menu-Plugin-Pop-Menu/jquery.popmenu.min.js"></script>
<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

Answer 1

Use position:absolute with top

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

$(function() {
  $('#demo_box').popmenu({
    'controller': 'true',
    'width': '100%',
    'background': '#800000',
    'focusColor': 'black',
    'borderRadius': '10px',
    'top': '0',
    'left': '0',
    'iconSize': '50px'
  });
})

.demo_li {
  word-wrap: break-word;
  padding: 10px;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://www.jqueryscript.net/demo/Simple-jQuery-Popup-Menu-Plugin-Pop-Menu/jquery.popmenu.min.js"></script>
<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

The !important is needed to override the position:relative of the popmenu.js plugin.