Why jquery script change some css styles?

Question

What it has to look like: Page button with dropdown menu should be opened with hover effect. You mouseover the "Page" button, dropdown menu will appear, the button should be with a dark background, exactly like other buttons "Product " and "Blog" (these two buttons work well in any case). While you are choosing something in the dropdown menu, "Page" button still have the same style (dark background like the last two buttons during hover). Only when the cursor will leave dropdown menu or button, dropdown menu should disappear and "Page" button should be with white background.

Text above describe how the button should work with JavaScript code. JS code makes hover effect, but do something wrong with styles.

Now with JS code "Page" button (while cursor situated at this button and dropdown menu) looks like the active button "Home" with white background. We need to fix this and make the button like in the description above.

Please check out JSFiddle to see what I'm talking about.

Sorry for my English if you'll find some mistakes :)

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');
    });

Also I found out that removing of this line

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

do some changes, but removing this line is not the full solving

Before. We need to fix it

After

Answer 1

Looks like your problem is with bootstrap and its css. Take a look at this post and try setting up the bootstrap for you desired colors. Bootstrap Button active color change

I hope that helps!