Скажите пожалуйста почему у меня постоянно дергаются блоки которые расположены в одну строку один за другим?
ul li{
float: left;
list-style-type: none;
}
a{
text-decoration: none;
color: #464646;
cursor: pointer;
}
.clear{
clear: both;
}
.catalog{
margin-top: 10px;
}
.catalog_item:hover{
border: none;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
cursor: pointer;
}
.catalog_item{
height: 406px;
width: 266px;
float: left;
border: 2px solid #6d87b4;
margin: 50px 30px 0 0;
position: relative;
}
.catalog_item>div{
margin: 18px 0 0 23px;
}
.catalog_item>p{
font: 20px RobotoBold;
background: #fff;
position: absolute;
top: -11px;
left: 23px;
width: 220px;
text-align: center;
}
.catalog_item ul{
margin-top: 20px;
}
.catalog_item ul li{
clear: both;
}
/*.catalog_item ul li:last-child a{
opacity: 0.7;
}*/
.catalog_item ul li:hover a{
color: #f7cac9;
}
.catalog_item ul li:before {
content: "—";
position: relative;
/*left: -5px;*/
color: #6d87b4;
}
.catalog_item ul li a{
margin-left: 8px;
font-size: 14px;
}
.catalog_item div>a{
text-decoration: underline;
color: #6d87b4;
}
.catalog_item:nth-child(4n+4), .article:nth-child(4n+4), .factories a:nth-child(4n+4){
margin-right: 0;
}
.catalog_item img{
width:220px;
height:180px;
}
<div class="catalog">
<div class="catalog_item">
<p>Мебель для зала</p>
<div>
<img src="images/Img_2.png" alt""/>
<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>
<div class="clear"></div>
<a href="">Показать все</a>
</div>
</div>
<div class="catalog_item">
<p>Детские</p>
<div>
<img src="images/Img_3.png" alt""/>
<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>
<div class="clear"></div>
<a href="">Показать все</a>
</div>
</div>
<div class="catalog_item">
<p>Кухни</p>
<div>
<img src="images/Img_4.png" alt""/>
<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>
</div></div>
<div class="catalog_item">
<p>Мягкая мебель</p>
<div>
<img src="images/Img_5.png" alt""/>
<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>
<div class="clear"></div>
<a href="">Показать все</a>
</div>
</div>
</div>
И как при наведении можно поменять цвет тире перед списком? Я пробовала так-
.catalog_item ul li:hover li:before{
color: #f7cac9;
}
.catalog_item ul li:hover:before
.li
который вложен вli:hover
.