Почему скрипт jquery меняет некоторые стили css?

Как это должно выглядеть: Кнопка страницы с выпадающим меню должна открываться с эффектом наведения. Вы наводите курсор мыши на кнопку «Страница», появляется раскрывающееся меню, кнопка должна быть с темным фоном, точно так же, как другие кнопки «Продукт» и «Блог» (эти две кнопки хорошо работают в любом случае). Пока вы выбираете что-то в раскрывающемся меню, кнопка «Страница» по-прежнему имеет тот же стиль (темный фон, как у последних двух кнопок при наведении курсора). Только когда курсор покинет раскрывающееся меню или кнопку, раскрывающееся меню должно исчезнуть, а кнопка «Страница» должна быть с белым фоном.

Текст выше описывает, как кнопка должна работать с кодом JavaScript. Код JS создает эффект наведения, но что-то не так со стилями.

Теперь с JS-кодом кнопка «Страница» (когда курсор находится на этой кнопке и в раскрывающемся меню) выглядит как активная кнопка «Домой» с белым фоном. Нам нужно это исправить и сделать кнопку как в описании выше.

Пожалуйста, проверьте JSFiddle, чтобы понять, о чем я говорю.

Извините за мой английский, если найдете ошибки :)

jsfiddle

HTML

<div class = "menu">
    <ul class = "nav nav-pills">
        <li class = "nav-item">
            <a class = "nav-link active uppercase" href = "#">Home</a>
        </li>
        <li class = "nav-item dropdown">
            <a class = "nav-link dropdown-toggle uppercase  outline" data-toggle = "dropdown" href = "#" role = "button" aria-haspopup = "true"
                aria-expanded = "false">Pages</a>
            <div class = "dropdown-menu dropdown-menu-right">
                <div class = "wrapperForDropdomnUpArrow">
                    <div class = "dropdownUpArrow">
                    </div>
                </div>
                <a class = "dropdown-item uppercase aboutUs" href = "#">About us</a>
                <a class = "dropdown-item uppercase" href = "#">Company</a>
            </div>
        </li>
        <li class = "nav-item">
            <a class = "nav-link uppercase outline" href = "#">Product</a>
        </li>
        <li class = "nav-item">
            <a class = "nav-link uppercase outline" href = "#">Blog</a>
        </li>
    </ul>
</div>

CSS

.menu a:hover {
    color: #fff;
    background: #000;
    border-radius: 3px;
    transition: 0.4s;
}

.menu a {
    font-size: 12px;
    font-family: montserrat;
    color: #afb0b1;
    text-align: center;
    padding: 16px 19px;
    line-height: 12px;
    margin: 0px -5px;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #f3f6f9;
    color: #000;
}

.dropdown-menu {
    background-color: #000;
    padding: 0px;
    border: 0;
    margin: 1px 0px 0px 0px;
}

.dropdown-menu a {
    text-align: left;
    padding: 12.5px 69px 12.5px 22px;
    line-height: 12px;
    margin: 0;
}

.dropdown-menu .aboutUs {
    text-align: left;
    padding: 20px 69px 12.5px 22px;
    line-height: 12px;
}

.dropdown-menu .FAQ {
    text-align: left;
    padding: 12.5px 69px 20px 22px;
    line-height: 12px;
}

a.nav-link.dropdown-toggle:focus {
    color: #fff;
    background: #000;
    border-radius: 3px;
}

jQuery

$(".dropdown-menu").css('margin-top', 0);
$(".dropdown")
    .mouseover(function () {
        $(this).addClass('show').attr('aria-expanded', "true");
        $(this).find('.dropdown-menu').addClass('show');
    })
    .mouseout(function () {
        $(this).removeClass('show').attr('aria-expanded', "false");
        $(this).find('.dropdown-menu').removeClass('show');
    });

Также я узнал, что удаление этой строки

    $( this ).addClass('show').attr('aria-expanded',"true");

внести некоторые изменения, но удаление этой строки не является полным решением

Перед. Нам нужно это починить

После