html - 内容为 :after 的 Bootstrap 可滚动下拉菜单

Question

我正在尝试使用 Bootstrap 构建一个可滚动的下拉菜单，顶部边缘有一个小三 Angular 形。

我使用 :after 选择器来设置三 Angular 形的样式，它仅在下拉列表不可滚动时才有效。

只要我将下拉列表设置为可滚动，就会忽略 :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; }

Updated fiddle

您可以查看更新的链接，让我知道它是否适用于您。