Меню

Выделение кнопки полностью

by LuckyCat

HTML

<div>
<ul>
  <li><a href="#">о senseit</a></li>
  <li><a href="#">продукты</a></li>
  <li><a href="#">challenge!</a></li>
  <li><a href="#">поддержка</a></li>
</ul>
   </div>

CSS

div{
width: 400px;
  margin 0 auto;
}
div ul{
display: block; 
background: #d0001e;
width: 400px;
height: 100px;
}
div ul li{
display: block; 
float: left;
width: 100px;
text-align: center;
}
div ul li:first-child a{
border-left: none;
}
div ul li a:hover{
background: #fff; 
border-top: 1px solid #fff;
border-left: 1px solid #fff;
color: #de0524;  
}
div ul li a{
display: block;
width: 100px;
height: 100px;
border-top: 1px solid #ec203d;
border-left: 1px dotted #000;
padding: 15px 0 15px 0;
font-family: Myriad Pro;
font-size: 16px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}