Почему скачут элементы при ховере?

Question

CrystalClear @CrystalClear

HTML
CSS

Почему скачут элементы при ховере?

Здравствуйте. Такая ситуация. При наведении на элементы они смещаются в право, хотя не должны.

<ul class="sub-menu-items">
                                    <a href="product.html" class="sub-menu-item"><li>Аксессуары "AUTOBAN" (Ю.Корея)</li></a>
                                    <a href="" class="sub-menu-item"><li>Брелоки</li></a>
                                    <a href="" class="sub-menu-item"><li>Ведра, канистры</li></a>
                                    <a href="" class="sub-menu-item"><li>Вешалки</li></a>
                                    <a href="" class="sub-menu-item"><li>Держатели мобильных телефонов, очков и т.п.</li></a>
                                    <a href="" class="sub-menu-item"><li>Зеркала</li></a>
                                    <a href="" class="sub-menu-item"><li>Знаки аварийной остановки</li></a>
                                    <a href="" class="sub-menu-item"><li>Коврики на панель приборов</li></a>
                                    <a href="" class="sub-menu-item"><li>Коврики напольные</li></a>
                                    <a href="" class="sub-menu-item"><li>Крышки бензобака</li></a>
                                    <a href="" class="sub-menu-item"><li>Молдинги бампера</li></a>
                                    <a href="" class="sub-menu-item"><li>Накладки декоративные</li></a>
                                    <a href="" class="sub-menu-item"><li>Накладки на педали</li></a>
                                    <a href="" class="sub-menu-item"><li>Наклейки автомобильные</li></a>
                                    <a href="" class="sub-menu-item"><li>Насадки на глушитель</li></a>
                                    <a href="" class="sub-menu-item"><li>Оплетки руля</li></a>
                                </ul>

.sub-menu-items {
    -ms-flex-preferred-size: 44%;
    flex-basis: 44%;
    padding-top: 9px;
    margin: 0px;
    padding-left: 12px;
    list-style: none;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.19;
    letter-spacing: normal;
    text-align: left;
    color: #ffffff;
}


.sub-menu-items a {
    display: block;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 2.19;
    letter-spacing: normal;
    text-align: left;
    color: #efefef;
    text-decoration: none;
}


.sub-menu-items a li {
    padding-left: 15px;
}

вот как это выглядит на скриншотах

Мне казалось что это из за дисплей блока, но смена на инлайн блок или что то другое тоже не помогло. Подскажите пожалуйста что делать? Заранее спасибо.