Menus

[<M/>]

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

[AleMonteiro]

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.

[JorgeM]

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

[<M/>]

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!

[JorgeM]

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   */

[<M/>]

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...

[AleMonteiro]

Try this:

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