Javascript 带动画的引导自定义下拉列表

有人知道如何使引导下拉菜单看起来像这样吗

我的问题是自定义基本下拉菜单，使边框消失，并使底部的蓝线在打开时缓慢向下移动

---

谢谢您的回答。

您可以使用CSS尝试类似的内容

CSS

HTML

下拉示例

风格相应

---

希望这有帮助。

可能重复的可能重复的抱歉，没有找到。谢谢但对我来说，重要的是这些文件中没有定义的底线answers@slacker在评论之前，至少仔细阅读描述。好的，先生，对不起。谢谢你，太好了。。。CSS技巧也很有效。

.dropdown-toggle{
  border:none;
  background-color: transparent;
  outline:0;
}
.dropdown-toggle:active{
  box-shadow:none;
}

.btn.dropdown-toggle:focus{
  outline:0;
}

.dropdown-toggle[aria-expanded="true"] .caret{
  transform:rotate(180deg);
  transition:all ease 0.5s;
}
.dropdown-toggle .caret{
  transition:all ease 0.5s;
}
.dropdown .dropdown-menu{
  height:0;
  padding:0;
  overflow:hidden;
  margin:0;
  display:block;
  border:none;
  box-shadow:2px 2px 2px rgba(33,150,243,0.2);
  border-bottom:1px solid #2196F3;
  transition:all ease 0.5s;
  border-radius:0px;
  padding-left:2px;
  padding-right:2px;
}
.dropdown.open > .dropdown-menu{
  height:auto;

}
.dropdown.open > .dropdown-menu > li a:hover{
  background-color: #2196F3;
  border-radius:5px;
  color:#fff;
}

<div class="dropdown">
  <button class="btn dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>