title: How to stick dropdown arrow at one place
body: <p>I'm trying to fix the arrow at one fixed position. Currently if the dropdown options gets increased then the arrow gets displaced as you can see in the <a href="https://codepen.io/khamran1/pen/MWmpRZj?editors=1100" rel="nofollow noreferrer">codesandbox</a> and in the example below. To regenerate add the options in the service dropdown to see the arrow/beak gets displaced.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.list {
    display: flex;
    flex-direction: column;
    width: 100px;
  }
  
  .list .item {
    padding: 10px;
    font-size: 24px;
    font-weight: normal;
    background-color: #ccc;
    cursor: pointer;
  }
  
  .list .item:hover {
    text-decoration: underline;
  }
  
  .list .item.item-dropdown {
    position: relative;
  }
  
  .list .item.item-dropdown:hover .dropdown-content {
    display: block;
  }
  
  .list .dropdown-content {
    display: none;
    position: absolute;
    left: 100px;
    bottom: -20px;
  }
  
  .list .dd-menu {
    position: relative;
    margin-left: 20px;
    background-color: #ccc;
    padding: 5px 20px;
  }
  
  .list .dd-menu:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-right: 14px solid #ccc;
    border-bottom: 17px solid transparent;
    margin-left: -8px;
    top: 45%;
    left: -4%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="list"&gt;
    &lt;div class="item"&gt;Home&lt;/div&gt;
    &lt;div class="item"&gt;About&lt;/div&gt;
    &lt;div class="item item-dropdown"&gt;Services
      &lt;div class="dropdown-content"&gt;
        &lt;div class="dd-menu"&gt;
          &lt;div class="item"&gt;Cleaning&lt;/div&gt;
          &lt;div class="item"&gt;Dry&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>