I made a menu and for some odd reason, I can't figure out why, they bounced out of their positions... Can someone tell me why this is going on? I'll post my source code if needed.

Thanks

You gave no info that can be analysed. Please post the code with problem, and if possible a test page or upload to jsfiddle.net.

yes, go ahead and post the source code for more help.

Well I fixed the "bouncing" issue, not I have an issue in color... why do they show up purple... and how come I can't create a 1px space between each tab?
Here is my code:

Css:

#apDiv7 {
    position:absolute;
    overflow:auto;
    width:200px;
    height:115px;
    z-index:1;
    left: 6px;
    top: 6px;
    background-color: #5c6063;
}
#apDiv8 {
    position: static;
    width:200px;
    height: 26px;
    z-index:1;
    font-size: 11px;
    color: #FFF;
    background: #636363; /* Old browsers */
    background: -moz-linear-gradient(top, #2b2a2a 0%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2b2a2a), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #2b2a2a 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #2b2a2a 0%,#000000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #2b2a2a 0%,#000000 100%); /* IE10+ */
    background: linear-gradient(to bottom, #2b2a2a 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2a2a', endColorstr='#000000',GradientType=0 ); /* IE6-9 */        
}
a:link {
    color: #FFF;
    text-decoration:none;
    line-height: 25px;
    position: relative;
    left: 10px;
 }
a:hover {
    color: #3780c3;
    line-height: 25px;
    left: 10px;
    text-decoration: none;
}
#apDiv9 {
    position: static;
    width:200px;
    height: 26px;
    z-index:2;
    top: 29px;
    font-size: 11px;
    color: #FFF;
    background: #636363; /* Old browsers */
    background: -moz-linear-gradient(top, #2b2a2a 0%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2b2a2a), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #2b2a2a 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #2b2a2a 0%,#000000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #2b2a2a 0%,#000000 100%); /* IE10+ */
    background: linear-gradient(to bottom, #2b2a2a 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2a2a', endColorstr='#000000',GradientType=0 ); /* IE6-9 */        
}
#apDiv10 {
    position: static;
    width:200px;
    height:26px;
    z-index:3;
    font-size: 11px;
    top: 59px;
    color: #FFF;
    background: #636363; /* Old browsers */
    background: -moz-linear-gradient(top, #2b2a2a 0%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2b2a2a), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #2b2a2a 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #2b2a2a 0%,#000000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #2b2a2a 0%,#000000 100%); /* IE10+ */
    background: linear-gradient(to bottom, #2b2a2a 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2a2a', endColorstr='#000000',GradientType=0 ); /* IE6-9 */        

}
#apDiv12 {
    position: static;
    width:200px;
    height:26px;
    z-index:4;
    top: 87px;
    font-size: 11px;
    color: #FFF;
    background: #636363; /* Old browsers */
    background: -moz-linear-gradient(top, #2b2a2a 0%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2b2a2a), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #2b2a2a 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #2b2a2a 0%,#000000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #2b2a2a 0%,#000000 100%); /* IE10+ */
    background: linear-gradient(to bottom, #2b2a2a 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2a2a', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

HTML:

<div id="apDiv7">
    <div id="apDiv8"><a href="http://google.com">1</a></div>
    <div id="apDiv9"><a href="http://amazon.com">2</a></div>
    <div id="apDiv10"><a href="http://facebook.com">3</a></div>
    <div id="apDiv12"><a href="http://twitter.com">4</a></div>
  </div>

But thanks you guys for responding quickly!

They show up purple because that's the default color that your browser is applying to a visited link. If you want to override those default properties, you need to apply additional CSS.

for example,

a:link {color:#FFFFFF;}       /* unvisited link  */
a:visited {color:#FFFFFF;}    /* visited link    */
a:hover {color:#FFFFFF;}      /* mouse over link */
a:active {color:#FFFFFF;}     /* selected link   */

On my browser, they would always show up blue... they never turned purple like it did recently... and I did try your snippets of code, i still got no change in color...

Try this:

a, a:link, a:hover, a:active, a:visited {
    color: #fff;
}