CSS ширина перехода не отображается

Question

Я хочу поставить переход при наведении курсора на одну из ссылок панели навигации.Я хочу, чтобы синий div, который я показываю на рисунке, увеличивался слева направо (только на ширину), что у меня не работает, когда я делаю width, оно просто появляется без какого-либо перехода.Имя класса div, на котором я хочу создать переход: menu-hover-bar

HTML

 <div class="dropdown" *ngFor="let item of navItems">
      <div class="dropdown-button" (click)="showSubMenu(item.label)">
        <div class="dropdown-button-row">
          <div class="label">
            <span>{{ item.label }}</span>
          </div>
          <div class="action"><i class="fa fa-caret-down"></i></div>
          <div class="menu-hover-bar"></div>
        </div>
      </div>
    </div>

CSS

.dropdown {
  display: inline-block;
  &-button {
    font-size: 16px;
    color: white;
    margin-right: 16px;
    cursor: pointer;

    .dropdown-button-row {
      position: relative;
      display: flex;
      align-items: flex-end;
      width: 100%;
      margin-top: 14px;
      margin-bottom: 14px;
      .label {
        margin-right: 4px;
      }
    }

    &:hover .menu-hover-bar {
      position: absolute;
      background-color: $csx-blue-400;
      top: 27px;
      z-index: 1;
      display: block;
      height: 4px;
      width: 100%;
      -webkit-transition: width 5s ease-in;
      transition: width 5s ease-in;
    }
  }
}