Q:

css : dropdown 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; }

A:

Try this out (pure CSS)
Here is the
Demo
And this is the 
Source
Works in IE8

