CSS过渡未应用于菜单中的下拉项答案

【问题标题】：CSS transition not being applied to dropdown item in menuCSS过渡未应用于菜单中的下拉项
【发布时间】：2021-04-21 09:49:33
【问题描述】：

我有一个引导菜单，我想在悬停时添加动画线条。 CSS 与简单菜单完美配合，但不适用于下拉菜单。我希望过渡也应该与下拉菜单一起使用。下面是 CSS 和下拉菜单代码。请指导我如何修改代码，使其也适用于下拉菜单。

.navbar a {
  position: relative;
}

.navbar a:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: red;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}

.navbar a:hover:after {
  width: 100%;
  left: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<ul class="navbar-nav" style="line-height:4">
  <li class="nav-item active"> <a class="nav-link nav-links" href="#">Home </a> </li>
  <li class="nav-item"><a class="nav-link nav-links" href="#"> About </a></li>
  <li class="nav-item active"> <a class="nav-link nav-links" href="#">Home </a> </li>
  <li class="nav-item"><a class="nav-link nav-links" href="#"> About </a></li>
  <li class="nav-item dropdown">
    <a class="nav-link  dropdown-toggle" href="#" data-toggle="dropdown">  Hover up  </a>
    <ul class="dropdown-menu fade-up drop">
      <li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
      <li><a class="dropdown-item" href="#"> Submenu item 2 </a></li>
      <li><a class="dropdown-item" href="#"> Submenu item 3 </a></li>
    </ul>
  </li>
</ul>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

【问题讨论】：

在css中把.navbar改成.navbar-nav试试
在css中将.navbar改为.nav-item

标签： html css twitter-bootstrap drop-down-menu css-transitions

【解决方案1】：

CSS 中有错误，没有 navbar 类的元素。

将此更改为navbar-nav

.navbar-nav a {
  position: relative;
}

.navbar-nav a:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: red;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}

.navbar-nav a:hover:after {
  width: 100%;
  left: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<ul class="navbar-nav" style="line-height:1.2">
  <li class="nav-item active"> <a class="nav-link nav-links" href="#">Home </a> </li>
  <li class="nav-item"><a class="nav-link nav-links" href="#"> About </a></li>
  <li class="nav-item active"> <a class="nav-link nav-links" href="#">Home </a> </li>
  <li class="nav-item"><a class="nav-link nav-links" href="#"> About </a></li>
  <li class="nav-item dropdown">
    <a class="nav-link  dropdown-toggle" href="#" data-toggle="dropdown">  Hover up  </a>
    <ul class="dropdown-menu fade-up drop">
      <li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
      <li><a class="dropdown-item" href="#"> Submenu item 2 </a></li>
      <li><a class="dropdown-item" href="#"> Submenu item 3 </a></li>
    </ul>
  </li>
</ul>

【讨论】：