кнопка

Проще всего открыть какой-нибуд button generator и сделать себе такую кнопку с градиентом:

http://www.bestcssbuttongenerator.com/

 #navigation{
background: #02ffb5;
height: 38px;
width: 1000px;
margin: 0 auto;
font-size: 14px;
}


#navigation ul.menu li {
height: 30px;
}

#navigation li a{
height: 27px;
border-left: 1px solid #of687e;
border-right: 1px solid #60b9cf;
display: block;
padding-left: 10px;
padding-right: 10px;
padding-top: 7px;
padding-bottom: 5px;
color: #676767;
text-decoration: none;
}

#navigation li.last a{
border-right: 0px;
}

#navigation li.first a{
border-left: 0px;
}

 ====================================================

сама кнопка из генератора

#navigation {

-moz-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
box-shadow:inset 0px 1px 0px 0px #ffe0b5;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fbb450), color-stop(1, #f89306));
background:-moz-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-webkit-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-o-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-ms-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:linear-gradient(to bottom, #fbb450 5%, #f89306 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89306',GradientType=0);

background-color:#fbb450;

-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;

border:1px solid #c97e1c;

display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:17px;
font-weight:bold;
padding:2px 11px;
text-decoration:none;

text-shadow:0px 1px 0px #8f7f24;

}
#navigation:hover {

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f89306), color-stop(1, #fbb450));
background:-moz-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-webkit-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-o-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-ms-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:linear-gradient(to bottom, #f89306 5%, #fbb450 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f89306', endColorstr='#fbb450',GradientType=0);

background-color:#f89306;
}

забыл, написать,

не получается сделать чтобы  сама кнопка отображалась только одна при нажатие?

:hover - это стиль по наведению, :active - активная ссылка.

у меня же нет :active - активная ссылка.

как вот так сделать меню

Сделать, чтобы выдвигалась черная полоска? Вам нужно будет сделать на hover так

margin-top: -5px;

padding-top: 5px;

Таким образом вы поднимете блок на пикселей вверх, но контент останется на месте.