html - 样式导航栏 : interaction between different styling settings

Question

我在设置导航栏样式时遇到问题，特别是导航栏中的下拉菜单。两个li下面的元素(链接到“配置文件”和“编辑配置文件”的元素没有正确显示。如您所见，我以两种不同的方式添加了类 my-dropdown-item，结果相同。导航栏的代码:

<div class="container">
 <div class="header">
  <div class="top-nav">
      <ul class="nav1">
          <li class="hvr-bottom <%= 'active' if current_page?(root_path) %>"><%= link_to "Home".html_safe, root_path %></li>
          <li class="hvr-bottom <%= 'active' if current_page?(target_path) %>"><%= link_to "Target".html_safe, target_path %></li>

       # The dropdown menu #
       <li class="dropdown hvr-bottom" style="max-width:300px; width:auto;">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> "Drop-down Menu"</a>
          <ul class="dropdown-menu" role="menu">
              <li><%= link_to "Profile", current_user, html_options = {class: "my-dropdown-item"} %></li>
              <li class="my-dropdown-item"><%= link_to "Edit profile", edit_user_path(current_user) %></li>
          </ul>
       </li>

      </ul>
  </div>
 </div>
</div>

结果是字体显示为白色，而它应该是黑色。在我的 css 文件中我有:

.my-dropdown-item {
  width: 100%;
  color: #000;
}

使用检查器我可以看到颜色被 .top-nav ul li a 的样式否决了。 (因此 my-dropdown-item 指定的字体颜色被划线)。后一种样式存在于 css 文件 file1.css 中，而 .my-dropdown-item存在于 file2.css 中。在 application.css我有:*= require file1在 *= require file2 行之前.所以我不明白为什么.top-nav ul li a否决.my-dropdown-item . 知道如何找出原因以及如何处理吗？

Answer 1

在link_to中添加覆盖类:

  <%= link_to "Edit profile", edit_user_path(current_user), class:"my-dropdown-item" %>

添加到 CSS

.my-dropdown-item {
  a {
  width: 100%;
  color: #000 !important;
  }
}

这可能需要一些调整，让我知道。