Почему вставка скрипта jquery изменила CSS?
Когда я вставляю код jquery css меняется,кнопка выпадающего меню имеет стиль, подобный активной кнопке, но кнопка выпадающего меню должна иметь другие стили. Пока я не вставил jquery, все работало хорошо.
JSFiddle[^]
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="menu">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active uppercase activeButton" 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>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<pre lang="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; }
Этот сценарий дает проблему
$( ".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');
});
Что я уже пробовал:
Я попытался удалить стиль css, чтобы понять, почему, но это не помогло.