<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<nav>
   <ul> 
      <li><a href="#">Ваш сайт</a></li> 
      <li><a href="#">О вас</a></li> 
      <li><a href="#">Клиенты</a></li> 
      <li><a href="#">Работы</a></li> 
      <li><a href="#">Принципы</a></li> 
      <li><a href="#">Загрузки</a></li> 
      <li><a href="#">Блог</a></li> 
      <li><a href="#">Контакты</a></li> 
   </ul> 
</nav> 

<nav>
   <ul>
      <li><a href="#" title="ваш сайт">Ваш сайт<br /> <small>Вернемся домой?</small>
</a></li>
      <li><a href="#" title="о вас">О вас<br /> <small>Узнайте нас больше</small>
</a></li>
      <li><a href="#" title="клиенты">Клиенты<br /> <small>Узнайте наших друзей</small>
</a></li>
      <li><a href="#" title="работы">Работы<br /> <small>Готовые проекты</small>
</a></li>
      <li><a href="#" title="принципы">Принципы<br /> <small>Наши тезисы</small>
</a></li>
      <li><a href="#" title="загрузки">Загрузки<br /> <small>Загрузите наш материал
</small></a></li>
      <li><a href="#" title="блог">Блог<br /> <small>Читайте о нас</small>
</a></li>
      <li><a href="#" title="контакты">Контакты<br /> <small>Обращайтесь к нам</small>
</a></li>
   </ul>
</nav>

* {
 padding: 0;
 margin: 0;
 
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

nav {
 width: 90%;
 margin: 50px auto; 
}
 
nav ul {
 list-style: none;
 overflow: hidden;
}

nav li a {
 background: #444;
 border-right: 1px solid #fff;
 color: #fff;
 display: block;
 float: left;
 font: 400 13px/1.4 Helvetica, Verdana, Arial, sans-serif;
 padding: 10px;
 text-align: center;
 text-decoration: none;
 text-transform: uppercase;
 width: 12.5%;
}
 
/*SMALL*/
nav small {
 color: #aaa; 
 font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
 text-transform: none;
 
}

nav li a {
 display: block;
 float: left;
 width: 12.5%;
 padding: 10px;
 
 background: #444;
 border-right: 1px solid #fff;
 
 color: #fff; 
 font: 400 13px/1.4 Helvetica, Verdana, Arial, sans-serif;
 text-align: center;
 text-decoration: none;
 text-transform: uppercase;
}

nav li a {
 background: #444;
 border-right: 1px solid #fff;
 color: #fff;
 display: block;
 float: left;
 font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
 padding: 10px;
 text-align: center;
 text-decoration: none;
 text-transform: uppercase;
 width: 12.5%;
 
 /*TRANSISTIONS*/
 -webkit-transition: background 0.5s ease;
    -moz-transition: background 0.5s ease;
      -o-transition: background 0.5s ease;
     -ms-transition: background 0.5s ease;
         transition: background 0.5s ease;
}
 
/*HOVER*/
nav li a:hover {
 background: #222;
}

nav li:last-child a {
 border: none;
}

/* MEDIA QUERIES*/
@media only screen and (max-width : 1220px),
only screen and (max-device-width : 1220px){
 nav li a {
  font: 400 10px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
 }
 
 nav small {
  font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif;
 }
}

@media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
 nav li a {
  width: 25%;
  border-bottom: 1px solid #fff;
  font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
 }
 
 nav li:last-child a, nav li:nth-child(4) a {
  border-right: none;
 }
 
 nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, 
nav li:nth-child(8) a {
  border-bottom: none;
 }
}

@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
 nav li a {
  width: 50%;
  font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
  padding-top: 12px;
  padding-bottom: 12px;
 }
 
 nav li:nth-child(even) a {
  border-right: none;
 }
 
 nav li:nth-child(5) a, nav li:nth-child(6) a {
  border-bottom: 1px solid #fff;
 }
}
 
@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
 nav li a {
  font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
 }
}