0

我正在研究一个下拉菜单。我的工作在 chrome、opera 和 firefox 上运行顺利。但是 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并将形状放在那里之外，有没有人知道解决这个问题的方法？

4

1 回答 1

0

你用的是哪个版本的ie？并非所有 ie 版本都支持伪类

尝试使用 selectivzr http://selectivizr.com/

或http://www.webresourcesdepot.com/use-css3-pseudo-selectors-with-ie-ie-css3-js/

第二种解决方案对我来说效果很好。

于 2013-07-11T21:09:14.293 回答