HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="2.css" type="text/css" >
</head>
<title>Tytuł z karty</title>
<body>
<div class="wrapper">
<div class="header">Nazwa strony</div>
<div class="nav">
<div class="list">
<ol>
<li><a href="#">Zakładka#1</a></li>
<li><a href="#">Zakładka#2</a></li>
<li><a href="#">Zakładka#3</a></li>
<li><a href="#">Zakładka#4</a></li>
</ol>
</div>
</div>
</div>
</body>
</html>
CSS
body
{
text-align: center;
margin:0 !important;
background-color: #cceae7;
}
.header
{
width: 100%;
height: 150px;
line-height; 150px;
background-color: #66c0b7;
font-size: 90px;
color: white;
}
.nav
{
background-color: #009688;
width: 100%;
height: 60px;
}
ol > li
{
list-style-type: none;
display:block;
float:left;
height: 60px;
width: 250px;
border-right: 1px dashed #99d5cf;
}
ol > li a
{
text-decoration: none;
color: white;
font-size: 40px;
line-height: 60px
}
.list
{
width:1100px;
height:60px;
margin-left: auto;
margin-right: auto;
}
ol > li:first-child
{
border-left: 1px dashed #99d5cf;
}
ol > li:hover
{
background-color: white;
}
ol > li:hover a
{
color:#009688;
}