title: Menu image above background
body: <p>I am trying to place a image above my menu background.</p>
  
  <p>I have tried <code>list-style-image</code> and background image (on <code>li</code> and <code>a</code> tag). How do I do this?
  Image with the menu: <a href="http://i.stack.imgur.com/XS7XB.gif" rel="nofollow">image from menu</a></p>
  
  <p>orange background: this is the background of the menu (the a tag)</p>
  
  <p>gray box: This is the image I want above my menu backround. (the 'A' is where the menu background is.</p>
  
  <pre><code>    #nav ul li{
      font-weight: bold;
      float: left;
      margin-top: -5px;
      position: relative;
      padding: 6px 5px 0 15px;
      z-index: 99;
      height: 50px;
      background-position:left center;
      background-image: url(../images/bussel/menu-blad1.png) !important;
      background-repeat: no-repeat;
  
  }
  #nav ul li a{
      background-color: #feb24e;
      display: block;
      width: 153px;
      height: 35px;
      color: #fff;
      text-align: center;
      text-decoration: none;
      margin: 10px 0px 0px 0px;
      position: relative;
      z-index: 98;
  }
  </code></pre>