Tell me please why do I constantly have blocks that are arranged in one line one by one?

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>

And how when you hover you can change the color of the dash in front of the list? I tried this

 .catalog_item ul li:hover li:before{ color: #f7cac9; }
  • 2
    The answer to the second question is: .catalog_item ul li:hover:before . - Arnial
  • You do not need to choose li which is nested in li:hover . - Arnial

2 answers 2

When you hover you have border: none; so that the blocks do not move when you hover it is necessary for the .catalog_item prescribe the box-sizing: border-box; property box-sizing: border-box;

To change the color of the dash in front of the list items, use the .catalog_item:hover ul li:before selector .catalog_item:hover ul li:before

UPD: If it was assumed that the color of the dash changes by hovering over the list item, as noted in the comment above Arnial , use the selector .catalog_item ul li:hover:before .

  • 2
    either make border-color: transparent - Arnial
  • I guess the color of the tyre should change when you hover on the menu item inside the list. And not when you hover on the list. - Arnial
  • Yes, I missed this moment, you are right) - Igor
  • border-box will not solve the problem. - Qwertiy ♦

The shift is due to the resizing of the element when hovering - the border disappears.

The most correct is to fix this by setting border-color: transparent .

It is also possible to replace the disappearance of the border by increasing the padding, but this method will not only require more implementation which will require calc), but will also cause more significant recalculations in the browser.

The option of changing box-sizing to border-box not a solution. Yes, outside the blocks (in most cases, but not necessarily) will cease to move, but because of the change in the internal size of the block that the mouse was pointing at, something will move inside it.