Bootstrap scrollable dropdown with content :after

Question

我试着用Bootstrap建立一个可滚动的下拉菜单，上面有一个小三角形。

我使用了:after选择器来设置三角形的样式，只有当下拉菜单不可滚动时它才起作用。

一旦我将dropdown设置为scrollable，:after类就会被忽略。

这是我为可滚动菜单定制的css：

.scrollable-menu {
    height: auto;
    max-height: 500px;
    overflow-x: hidden;
}
.scrollable-menu:after {
    content:"";
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #e3c7aa;
    position:absolute;
    top:-10px;
    right:30px;
 }

Answer 1

检查下面的链接是否与您一起工作。

Fiddle

.scrollbar{ background-color:lightgray;height: auto;max-height: 200px;overflow-x: hidden;overflow-y:scroll; min-width: 135px;margin-top: 0px; }
#ex4::-webkit-scrollbar { width:10px;background-color:#cccccc; } 
#ex4::-webkit-scrollbar-thumb { background-color:#B03C3F;border-radius:10px; }
#ex4::-webkit-scrollbar-thumb:hover { background-color:#BF4649;border:1px solid #333333; }
#ex4::-webkit-scrollbar-thumb:active { background-color:#A6393D;border:1px solid #333333; }

您可以检查与更新的链接，让我知道，如果它与您的工作。