title: Adding icon using css :before
body: <p>I'm using superfish menu for the WordPress. I want to add some margin between the menu parent item and its dropdown and want to add an icon on the top of the drop down, so that it looks like following image:</p>
  
  <p><img src="https://i.stack.imgur.com/oc3RY.png" alt="enter image description here"></p>
  
  <p>The menu markup is automatically generated by the WordPress so it cannot be changed. I'm trying following CSS but it does not seem to work:</p>
  
  <pre><code>ul &gt; li ul.subs{
      margin-top: 10px;
  }
  
  ul &gt; li ul.subs:before{
      content: " ";
      display: block;
      height: 10px;
      width: 20px;
      position: absolute;
      top: 0;
      background: url('http://i.imgur.com/NL4Rq2S.png') no-repeat center bottom;  
  }
  </code></pre>
  
  <p><strong>Problems:</strong></p>
  
  <ol>
  <li>When I hover, the sub menu disappears</li>
  <li>The arrow icon does not appear.</li>
  </ol>
  
  <p><strong>Demo:</strong>
  <a href="http://jsfiddle.net/y9Rk9/" rel="nofollow noreferrer">http://jsfiddle.net/y9Rk9/</a></p>