Question

I need help with getting my navigation links to go behind my container. once i do this then i can get a jump affect to my links and add images. i want it to look like a folder and when you hover over links to look like each link goes to a new folder with jumping. for some reason when i put in the code to make the links jump it pushed the links down into my container.i need it just a little bit below container and behind to get that look. can you help please.

BODY {
overflow:hidden;
      margin: 150px; 
      padding: 0; 
      background: url ();
      color: #404040; 
      font: normal 12px arial;}


#header {
      margin:35px auto;
      width: 800px;
      height: auto;
      padding: 10px 0px 0px 0px;
      background: #900}



A.main:link, A.main:active, A.main:visited
       {
       margin-bottom: 0px; 
       padding: 5px 20px 20px 10px;
       margin: 0px 2px 0px 2px;
       background: url('file:///C|/Users/JESS/Desktop/none');
       border:double;
       float:left;
       margin: 25px;}

A.main:hover  
     {color: #303030;
      border: double;
      margin:4px;}

#container {
     margin: 0px auto;
     padding-left:15px;
     width: 800px;
     height: auto;
     background: #000;
     border-style:double;
     box-shadow: 15px 15px 5px #333;
     -moz-box-shadow: 10px 10px 5px #333;
     -webkit-box-shadow: 10px 10px 5px #333;} 

#content {
     float: none;
     width: 800px;
     padding: 0px 0px 100px 0px;
     height: auto;
     text-align: justify;
     overflow: auto;}

<div id="header">
      <center>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      </center>
</div>



<div id="container">



<div id="content">

Answer 1

Setting z-index requires that you set position– though the value can be relative, absolute or fixed. To make it “jump” in the way I think you’re describing, you could mess around with the margins, like so:

A.main:link, A.main:active, A.main:visited {
       z-index: 5;
       position: relative;
       margin-bottom: 0px;
       padding: 50px;
       padding-top: 0px;
       border:double;
       float:left;
       margin: 10px;}

A.main:hover {
      color: #303030;
      border: double;
      margin:10px;
      margin-top:0px;
      margin-bottom:20px;}

#container {
     margin: 0px auto;
     padding-left:15px;
     width: 800px;
     height: auto;
     background: #000;
     border-style:double;
     position:relative;
     box-shadow: 15px 15px 5px #333;
     -moz-box-shadow: 10px 10px 5px #333;
     -webkit-box-shadow: 10px 10px 5px #333;}