<header>
     <div id="name-site">
	<img src="images/namesite-physics.png">
     </div>
     <div id="wrap-menu">
	<ul id="main-menu">
		<li id="link1"><a href="#">Механика</a></li>
		<li id="link2"><a href="#">Термодинамика</a></li>
		<li id="link3"><a href="#">Электричество</a></li>
		<li id="link4"><a href="#">Оптика</a></li>
		<li id="link5"><a href="#">Ядерная физика</a></li>
	</ul>
     </div><!-- wrap-menu -->
</header>

#wrap-menu {
	height: 200px;
	margin: 0;
	padding: 0;
}

#wrap-menu  ul {
	list-style: none;
	margin: 0;
	padding: 0 0 0 30px;
}

#wrap-menu li {
	display: block; /* display: block  потому что задаём width */
	float: left;
	position: relative;
	width: 130px;
	height: 130px;
}

#link1 { background-image: url(images/icon-mechanica.png);}
#link2 { background-image: url(images/icon-termodinamika.png);}
#link3 { background-image: url(images/icon-electrisity.png);}
#link4 { background-image: url(images/icon-optica.png);}
#link5 { background-image: url(images/icon-nuclear.png);}

#wrap-menu li  a{
	position: absolute;
	bottom: 0;
	margin: auto;
	color: #000;
	text-decoration: none;
	font-size: 16px;
}

#wrap-menu li  a{
	width: 130px;
	text-align: center;
	bottom: 0;
}