javascript - 在 DIV 上重叠 UL 标签

Question

我不是很擅长 CSS。我尽我所能去尝试。我想在下面的任何内容上显示 UL 菜单。在这个例子中是“你好”。但目前“你好”在菜单打开时向下移动。我尝试了其他 SO 问题的示例，但它们不起作用。您可以在以下位置找到完整的代码:

$(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

将position:absolute与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

需要 !important 来覆盖 popmenu.js 插件的 position:relative。