Школьные предметы
by pharma_nsk
HTML
<body>
<div>
<nav>
<a href="#1" class="current home">Главная</a>
<a href="#2" class="math">Математика</a>
<a href="#3" class="phys">Физика</a>
<a href="#4" class="chemis">Химия</a>
<a href="#5" class="hist">История</a>
</nav>
</div>
</body>CSS
body {background-image:url('http://html5book.ru/wp-content/uploads/2015/07/background46.png'); font-size:16px; font-family:sans-serif;}
nav {height:40px; width:560px; margin: 50px auto; text-align:center; border-bottom:1px solid white; padding-left:20px; background-color: #4A4A4A; }
nav a {display:inline-block; height:40px; width:100px; color:white; text-align:center; line-height:40px; vertical-align:middle; white-space: nowrap; text-decoration:none; float:left; }
nav a:last-child {margin-right:0;}
nav .home {background-color:#FE0;}
nav .math {background-color:#FF0A0A;}
nav .phys {background-color:#B700FF;}
nav .chemis {background-color:#00C3FF;}
nav .hist {background-color:#41D17B;}
nav .current {background-color:#FF9D00; height:41px;}
nav::after {content:''; display:block; height:10px; width:580px; background-color:#FF9D00; position:relative; top:41px; left:-20px; }
nav a:hover {transition:all linear 0.2s; color:black;}