delete

delete

by Vladislav Altyncev

HTML

<div class="catalog_menu">
        <h5>Каталог</h5>
        <ul>
          <li><a href="#">Мужские костюмы</a></li>
          <li><a class="active" href="#">Мужские пиджаки</a></li>
          <li><a href="#">Мужские брюки</a></li>
          <li><a href="#">Мужской трикотаж</a></li>
        </ul>
      </div>

CSS

body {padding: 20px;}
/*
Catalog Menu
--------------------------------------------------*/
.catalog_menu {
	position: relative;
	width: 196px;
	margin: 0;
	padding: 15px 0;
	border: 2px solid #ccc;
	left: 16px;
}
.catalog_menu ul {
	margin: 0 0 35px;
	list-style: none;
	position: relative;
	padding: 0 20px 0;
	left: -20px;
}
.catalog_menu a {
	display: block;
	position: relative;
	text-decoration: uppercase;
	padding: 1px 0;
	font-family: 'PTSansRegular';
	font-size: 13px;
	line-height: 1.2;
	color: #333;
	text-align: center;
	border: 2px solid #FFF;
	width: 192px;
	-webkit-transition: color 0.3s linear;
	-moz-transition: color 0.3s linear;
	-o-transition: color 0.3s linear;
	-ms-transition: color 0.3s linear;
	transition: color 0.3s linear;
}
.catalog_menu a.active, .catalog_menu a:hover {
	border: 2px solid #ee3124;
	position: relative;
	width: 196px;
	margin-left: -22px;
	color: #ee3124;
	padding: 1px 20px;
	text-decoration: none;
}
.catalog_menu h5 {
	font-family: 'PTSansNarrowBold';
	font-weight: bold;
	font-size: 21px;
	color: #222;
	margin: 0 0 15px;
	text-align: center;
	text-transform: uppercase;
}