title: Z-index infront of object but still keep the objects function
body: <p>I got a navbar controlled by css working very fine with a hover effect,
  The problem is that I have a link I can't do anything about and I want that link to be on top of the navbar without disabling the hover effect. That link got a dropdown menu attached to it that I want to keep. 
  The reason I can't do anything about this link is because I am using a design platform
  works like this:
  Edit -> Toprow Objects: Navmenu (the link) - HTML document ( my navbar ) - searchfield. 
  (I modify the look by inserting objects)
  I thought I figured it all out when I discovered z-index.
  however when I put the code like this:</p>
  
  <pre><code>.main-nav-top {
      background: black url("picture");
      border-bottom: 1px solid #a4a4a4;
      border-top: 1px solid #a4a4a4;
      height: 47px;
      width: 1070px;
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }
  </code></pre>
  
  <p>the dropdown works verywell but the hover effects dissapears</p>
  
  <p>When I put the code like this:</p>
  
  <pre><code>.main-nav-top {
      background: black url("Picture");
      border-bottom: 1px solid #a4a4a4;
      border-top: 1px solid #a4a4a4;
      height: 47px;
      width: 1070px;
  position:absolute;
  left:0px;
  top:0px;
  z-index:+1;
  }
  </code></pre>
  
  <p>The hover works very well but the link with dropdown dissapears.
  Is there some way I can get this fixed?</p>