Bootstrap прокручиваемое раскрывающееся меню с контентом: после

Question

Я пытаюсь создать прокручиваемое выпадающее меню с Bootstrap с небольшим треугольником на верхнем краю.

Я использовал: после селектора, чтобы создать треугольник, и он работает только в том случае, если выпадающее меню не прокручивается.

Как только я установил выпадающее меню как прокручиваемое, класс after 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

Вы можете проверить с Обновленной ссылку дайте мне знать, если он работает с вами.