'div'에 오버플로가있을 때 : before 및 :: after content : hidden 속성

드롭 다운 메뉴에서 작업하고 있습니다. 내 작업이 크롬, 오페라 및 파이어 폭스에서 원활하게 작동하고 있습니다.하지만 IE에 문제가 있습니다. ::before과 ::after Pseudo-Elements를 사용하여 부모의 호버 이벤트에 오는 메뉴 위에 화살표 모양의 삼각형을 만듭니다. 전환 작업을 수행하기 위해 overflow: hidden; 속성을 사용하고 있습니다. 암호. 여기 'div'에 오버플로가있을 때 : before 및 :: after content : 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를 제외한 모든 브라우저가 컨테이너 위에 다른 div을 추가하는 것보다 다른이 문제를 해결하는 방법을 알고 container .Does 사람이 위의 화살표와 같은 형태를 보여주고 있다는 것입니다 거기에 모양을 넣는거야?

출처

2013-07-11 roostaamir