css: drop-down menu with arrow effect


how to create drop-down menu with arrow effect which work in ie8 as well.

what i did i cut the arrow image and wrote the following css code. it works perfectly for firefox and chrome while not working for ie8 is there any solution to create such menu that works in ie8 as well.?

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

Try this out (pure CSS)

Here is the Demo

And this is the Source

Works in IE8