Материализовать раскрывающийся список, изменяя размер шрифта после нажатия

Question

Я использую Materializecss в проекте Rails, и у меня появляется странная ошибка в моем навигаторе. На первый взгляд, мой настраиваемый css правильно отображает размер и цвет шрифта выпадающего списка. Однако после того, как я нажму на ссылку выпадающего списка, начнется мигание оригинального размера и цвета шрифта Materialize. Вот JSFiddle, который я сделал для имитации проблемы: https://jsfiddle.net/sayyl/x11xv5k9/. Обратите внимание, что, хотя в этом Fiddle шрифт остается темно-серым, в моем собственном проекте текст мигает по умолчанию. Ошибка размера шрифта одинакова для обоих.

_nav.html.erb

<nav> 
<!-- Profile Dropdown Structure --> 
<ul id="settingDrop" class="dropdown-content"> 
    <li><%= current_user.full_name %></li> 
    <li class="divider"></li> 
    <li><%= link_to "Edit Profile", edit_user_path(current_user) %></li> 
    <li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li> 
</ul> 

<!-- Alert Dropdown Structure --> 
<ul id="alertDrop" class="dropdown-content"> 
    <li class="alert">   
    <% if !current_user.confirmed_at %> 
     Confirm your email 
    <% end %> 
    </li> 
</ul> 


    <div class="nav-wrapper"> 
    <a href="/" class="brand-logo">LOGO</a> 
    <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a> 

    <ul class="right hide-on-med-and-down"> 
     <li class="alert"> 
      <a class="dropdown-button valign-wrapper alert" href="#!" data-activates="alertDrop" data-beloworigin="true"><i class="fa fa-bell fa-lg" aria-hidden="true"></i></a> 
     </li> 
     <li><a class="dropdown-button valign-wrapper" href="#!" data-activates="settingDrop" data-beloworigin="true"><%= image_tag @user.avatar.url(:thumb), class: "circle responsive-img" %> <i class="material-icons">arrow_drop_down</i></a></li> 
    </ul> 

    <ul class="side-nav" id="mobile-demo"> 
     <li><%= current_user.email %></li> 
     <li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li> 
     <% if !current_user.confirmed_at %> 
      <li class="alert" style="color:#e74c3c"><i class="fa fa-bell" aria-hidden="true"></i> confirm your email</li> 
     <% end %> 
    </ul> 
    </div> 
</nav> 

nav.scss

nav { 

.nav-wrapper { 
    background-color: #e7e6e4; 
    color: #505050; 
    font-family: 'Raleway', sans-serif; 

    .brand-logo { 
    color: #000; 

    .logo-highlight { 
     color: #b8d6c6; 
    } 
    } 

    a { 
    color: #505050; 
    padding: 0 15px 0 8px; 
    } 

    .alert { 
    color:#e74c3c; 
    padding: 0 15px 0 8px; 
    } 

    ul { 
    height: inherit; 

    img { 
     height: 50px; 
     border: 1px solid #fff; 
    } 
    } 

    #settingDrop, 
    #alertDrop { 

    min-width: 150px !important; 
    &.dropdown-content.active { 

     li { 
     color: #505050; 
     font-size: 12px; 
     line-height: 12px; 
     min-height: 40px; 
     display: flex; 
     align-items: center; 
     padding: 0 8px; 

     &.divider { 
      min-height: 0; 
     } 

     &.alert { 
      color:#e74c3c; 
     } 

     i { 
      height: inherit; 
      line-height: inherit; 
     } 

     p { 
      font-weight: 500; 
      font-size: 14px; 
     } 

     > a { 
      color: #505050; 
      padding: 0; 
      font-size: inherit; 
      line-height: inherit; 
     } 


     a:hover { 
      background-color: rgba(0,0,0,0); 
     } 
     } 

     li:first-child { 
     margin-top: 10px; 
     } 


    } 
    } 

} 

}

Answer 1

Это, вероятно, потому, что вы стилизации .active класс. Этот класс изменяется, когда вы нажимаете на раскрывающееся меню/ближе, которое объясняет, почему нет мигания при открытии раскрывающегося списка, но при его закрытии. Попробуйте убрать выпадающее содержимое без этого класса, и все должно быть в порядке.