Добрый вечер господа, нужна помощь. Ничего не происходит когда прописываю >. Словно такого не существует. Что делаю не правильно? Я новичок во всем этом, не судите строго пожалуйста, только учусь
<section class="main_cats s_black">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Услуги мастерской <strong>Авто</strong><span>Холл</span></h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="mc_wrap">
<li class="mc_item_wrap active">
<div class="mc_item">
<a href="#">
<span></span>
<h4>Кузовной ремонт</h4>
</a>
<div class="mc_toggle"></div>
<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>
<li>
<a href="#">Защитная полировка</a>
</li>
<li>
<a href="#">Антикоррозийная обработка кузова</a>
</li>
<li>
<a href="#">Удаление вмятин без покраски</a>
</li>
</ul>
</div>
</li>
<li class="mc_item_wrap">
<div class="mc_item">
<a href="#">
<span></span>
<h4>Механические работы</h4>
</a>
<div class="mc_toggle">
</div>
</div>
</li>
<li class="mc_item_wrap">
<div class="mc_item">
<a href="#">
<span></span>
<h4>Экспресс-услуги</h4>
</a>
<div class="mc_toggle">
</div>
</div>
</li>
<li class="mc_item_wrap">
<div class="mc_item">
<a href="#">
<span></span>
<h4>Диагностика</h4>
</a>
<div class="mc_toggle">
</div>
</div>
</li>
<li class="mc_item_wrap">
<div class="mc_item">
<a href="#">
<span></span>
<h4>Слесарные работы</h4>
</a>
<div class="mc_toggle">
</div>
</div>
</li>
<li class="mc_item_wrap">
<div class="mc_item">
<a href="#">
<span></span>
<h4>Ремонт пластика</h4>
</a>
<div class="mc_toggle">
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
.mc_item {
border: #353535 1px solid;
border-radius: 2px;
}
.mc_item_wrap {
margin-left: 30px;
width: 160px;
display: inline-block;
text-align: center;
}
.mc_item_wrap:nth-child(1) {
margin-left: 0;
}
.mc_wrap {
text-align: center;
padding: 0;
position: relative;
}
.mc_item_wrap a {
color: #fff;
}
.mc_item span {
display: block;
height: 85px;
width: 130px;
background-image: url(../img/cats_iconset.png);
margin: 15px auto 0px;
background-repeat: no-repeat;
}
.mc_item_wrap:nth-child(1) span {
background-position: 16px 0;
}
.mc_item_wrap:nth-child(2) span {
background-position: -150px 0;
}
.mc_item_wrap:nth-child(3) span {
background-position: -318px 0;
}
.mc_item_wrap:nth-child(4) span {
background-position: -484px 0;
}
.mc_item_wrap:nth-child(5) span {
background-position: -650px 0;
}
.mc_item_wrap:nth-child(6) span {
background-position: -815px 0;
}
.mc_item h4 {
font-family: "BebasBold";
font-size: 20px;
font-weight: normal;
margin-top: 5px;
margin-bottom: 7px;
}
.mc_item a:hover h4,
.mc_item_wrap.active h4 {
text-decoration: underline;
}
.mc_item_wrap.active,
.mc_item_wrap:hover {
background-color: #2a2a2a;
}
.mc_toggle {
background-color: #212121;
height: 25px;
cursor: pointer;
position: relative;
background-image: url(../img/mc_arr.png);
background-repeat: no-repeat;
background-position: 72px 10px;
}
.mc_item_wrap.active .mc_toggle,
.mc_item_wrap:hover .mc_toggle {
background-color: #353535;
background-position: -118px 10px;
}
.mc_item_wrap.active > ul {
position: absolute;
width: 100%;
}
.mc_item_wrap.active > ul li {
float: left;
font-family: "BebasRegular";
}
.mc_item_wrap.active > ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.mc_item_wrap.active > ul li a {
padding: 0 20px;
}
Простой
