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

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; }

Answer 1

试试这个(纯CSS)

这是 Demo

而这就是 源头

适用于IE8