title: css : dropdown menu with arrow effect
body: <p>how to create drop-down menu with arrow effect which work in ie8 as well.</p>
  
  <p>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 <strong>ie8</strong>  is there any solution to create such menu that works in ie8 as well.?</p>
  
  <pre><code> .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; }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/3BcON.png" alt="i used this image as arow"></p>
  
  <p><img src="https://i.stack.imgur.com/Y21Hg.png" alt="actual output needed"></p>