Question

如何创建带有箭头效果的下拉菜单，该菜单也适用于ie8。

我做了什么我剪了箭头图像并写了下面的css代码。它适用于firefox和chrome而不适用于 ie8 是否有任何解决方案来创建这样的菜单，也适用于ie8。？

 .main-navigation li ul:before {
background: url("images/arow.png") no-repeat scroll left center / 100% auto transparent;
content: "";
display: block;
height: 22px;
left: -6px;
position: absolute;
top: -20px;
width: 222px;
z-index: 1;
 }

.main-navigation li ul {
background-color: #000000;border-color: -moz-use-text-color #494949 #494949;
border-radius: 0 0 5px 5px; border-style: none solid solid; border-width: 0 1px 1px;
box-shadow: 0 0 9px 1px rgba(0, 0, 1, 0.75); padding-top: 10px;  width: 212px; }

i used this image as arow

actual output needed

Answer 1

试试这个（纯CSS）

这是 Demo

这就是 Source

适用于IE8

Answer 2

另外，尝试在head session下添加以下内容。

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

Answer 3

在<head>标记之间添加此元标记：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

css：带箭头效果的下拉菜单

3 个答案: