How to stick dropdown arrow at one place

Question

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 codesandbox and in the example below. To regenerate add the options in the service dropdown to see the arrow/beak gets displaced.

.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%;
}

<div class="list">
  <div class="item">Home</div>
  <div class="item">About</div>
  <div class="item item-dropdown">Services
    <div class="dropdown-content">
      <div class="dd-menu">
        <div class="item">Cleaning</div>
        <div class="item">Dry</div>
      </div>
    </div>
  </div>
</div>

Answer 1

Just like you used bottom property to align .dropdown-content, use bottom property on the .dd-menu:before to align it at place i.e. adjacent to 'Services'.

.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;
  bottom: 24px;
  left: -4%;
}

<div class="list">
  <div class="item">Home</div>
  <div class="item">About</div>
  <div class="item item-dropdown">Services
    <div class="dropdown-content">
      <div class="dd-menu">
        <div class="item">Cleaning</div>
        <div class="item">Dry</div>
        <div class="item">Ironing</div>
      </div>
    </div>
  </div>
</div>