當'div'溢出時，IE不會顯示:: before和:: after內容：隱藏屬性

我正在使用下拉菜單。我的工作正常運行在chrome，opera和firefox上。但是有一個問題與IE.I使用::before和::after Pseudo-Elements在菜單上方製作一個箭頭狀的三角形，這將在父級的懸停事件中落下。要使轉換生效，我正在使用overflow: hidden;屬性碼。當'div'溢出時，IE不會顯示:: before和:: after內容：隱藏屬性

下面的代碼：

//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 .Does任何人上方的箭頭狀的形狀知道一種方法以固定比添加另一div容器上方其他這個問題把形狀放在那裏？

來源

2013-07-11 roostaamir