Достижения науки
by pharma_nsk
HTML
<body>
<nav>
<a href="#news">Новости</a>
<a href="#" class="current">Аналитика</a>
<a href="#5">Достижения науки</a>
<a href="#6">Наука и власть</a>
<a href="#7">Мнения</a>
<a href="#8">Территория</a>
</nav>
</body>CSS
body {background-color:white; font-size:15px; font-family:sans-serif; }
nav {height:40px; width:660px; text-align:center; margin: 30px auto; border:1px solid #969696; text-transform:uppercase; font-stretch: ultra-condensed; background: linear-gradient(to bottom, rgba(106,189,185,1) 0%, rgba(31,74,74,1) 81%, rgba(18,41,38,1) 92%, rgba(4,32,36,1) 100%);}
nav a {display:inline-block; height:30px; text-align:center; margin-right:5px; padding:5px 10px; white-space: nowrap; float:left; line-height:30px; color:white; text-decoration:none;}
nav a:last-child {margin-right:0;}
nav a.current {color:#435452; text-decoration:none; background-color:#BCE35B; box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);}
nav a:hover {color:#BCE35B;border-bottom:3px solid #BCE35B; transition: all 0.2s linear; height:27px;}
nav a.current:hover {background-color:#D5FFB8; color:#435452; transition: all 0.2s linear;}