title: z-index and overflow doesn't work at all
body: <p>I was tried to set z-index, overflow, position absolute and rest css features but dropdown menu is still appearing in small square. thru console log, I figure out that some styles such as bootstrap-tabel.css and dropdown are conflicted between themselves and one style every time override other How could I fix it?</p>
  
  <p><a href="https://plnkr.co/edit/libqkaSATjDVnJWj68Mq?p=preview" rel="nofollow">This my plunker</a></p>
  
  <p>css</p>
  
  <pre><code>.dropdown-menu&gt;li
  {   position:relative;
      -webkit-user-select: none; /* Chrome/Safari */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* IE10+ */
      /* Rules below not implemented in browsers yet */
      -o-user-select: none;
      user-select: none;
      cursor:pointer;
  }
  .dropdown-menu .sub-menu {
      left: 100%;
      position: absolute;
      top: 0;
      z-index: 999;
      overflow: visible;
      display:none;
      margin-top: -1px;
      border-top-left-radius:0;
      border-bottom-left-radius:0;
      border-left-color:#fff;
      box-shadow:none;
  
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      -moz-overflow-scrolling: touch;
      -ms-overflow-scrolling: touch;
      -o-overflow-scrolling: touch;
      overflow-scrolling: touch;
      height: auto;
      max-height: 500px;
      border-left: none;
      border-right: none;
      -webkit-border-radius: 0 !important;
      -moz-border-radius: 0 !important;
      -ms-border-radius: 0 !important;
      -o-border-radius: 0 !important;
      border-radius: 0 !important;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      -ms-box-shadow: none;
      -o-box-shadow: none;
  
  }
  .right-caret:after,.left-caret:after
  {   content:"";
      border-bottom: 5px solid transparent;
      border-top: 5px solid transparent;
      display: inline-block;
      height: 0;
      vertical-align: middle;
      width: 0;
      margin-left:5px;
  }
  .right-caret:after
  {   border-left: 5px solid #ffaf46;
  }
  .left-caret:after
  {   border-right: 5px solid #ffaf46;
  }
  </code></pre>