0
我正在使用下拉菜单。我的工作正常运行在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
容器上方其他这个问题把形状放在那里?
我使用IE 10.问题不在于这里的选择器。在正常情况下,IE会显示箭头状的形状。但在这里,使用overflow:hidden属性,它不会再显示它 – roostaamir
ohk您是否添加了内容:'';到CSS? –
ofcourse我did.look在代码! – roostaamir