Question

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

我使用了：after选择器来设置三角形的样式，只有当下拉列表不可滚动时它才有效。

只要我将下拉列表设置为可滚动，就会忽略：after class。

这是我可滚动菜单的自定义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

您可以查看更新后的链接，告诉我它是否适合您。

带有内容的Bootstrap可滚动下拉列表：after

1 个答案: