html - 「div」にoverflow:hiddenプロパティがある場合、IEは::beforeおよび::afterコンテンツを表示しません

Question

私はドロップダウンメニューに取り組んでおり、私の作業はクロム、オペラ、ファイアフォックスでスムーズに機能しています.しかし、IEに問題があります.私は疑似要素を使用し::beforeて::after、メニューの上に矢印のような三角形を作成しています.親のホバーイベントを下に移動します。トランジションを機能させるためoverflow: hidden;に、コードでプロパティを使用しています。

コードは次のとおりです。

//here's the css:
#container
{
opacity: 0;
overflow: hidden;
position: absolute;
top: 45px;
width: 305px;
height: 0px;
background: rgb(99,98,98);
border: 2px solid #363636;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-transition: all linear .3s;
transition: all linear .3s;*/
-webkit-transition: opacity linear .3s, top linear .3s, height linear .3s;
-moz-transition: opacity linear .3s, top linear .3s, height linear .3s;
transition: opacity linear .3s, top linear .3s, height linear .3s;
}

#classes:hover #container
{
overflow: initial;
height: 200px;
opacity: 1;
top: 60px;
-webkit-transition: opacity linear .3s, top linear .3s, height linear .0000001s;
-moz-transition: opacity linear .3s, top linear .3s, height linear .0000001s;
transition: opacity linear .3s, top linear .3s, height linear .0000001s;
}

#container::after
{
    display: block;
    content: "";
    position: absolute;
    top: -14px;
    right: 20px; 
    width: 0;
    height: 0;
    border-bottom: 15px solid #626161;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}

#container::before
{
    display: block;
    content: "";
    position: absolute;
    top: -17px;
    right: 18px;
    width: 0;
    height: 0;
    border-bottom: 17px solid #464545;
    border-right: 17px solid transparent;
    border-left: 17px solid transparent;
}

#container ul
{
    position: absolute;
    margin-right: 0;
    margin-left: 0;
    padding: 0;
    width: 300px;
    top: 5px;
    right: 2.5px;
    list-style: none;
    margin-top: 0px;

}

#container ul > li
{
    display: list-item;
}

#container ul > li a
{
    padding-top: 2.5px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 2.5px;
    height: 30px; 
    border-bottom: 1px solid #5f5f5f;
    border-top: 1px solid #4f4e4e;
    width: 300px;
    font-family: bkoodak;
    font-size:large;    
}

#container ul > li a:hover
{
    height: 30px;
    padding-top: 2.5px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 2.5px;
    width: 300px;
    font-family: bkoodak;
    background-color: #2cc427;
} 

//here's a dummy html

<div>
    <div id="classes"> DROPDOWN
    <div id="container">
        <ul>
            <li><a>item1</a></li>
            <li><a>item2</a></li>
            <li><a>item3</a></li>
        </ul>
    </div>
    </div>
</div>

問題は、IE を除くすべてのブラウザが の上に矢印のような形を表示することです。コンテナの上に別の形を追加してそこに形を置くcontainer以外に、この問題を解決する方法を知っている人はいますか?div