Help, please, edit the menu.
At first I inserted the images in the tags, but the border could not align at the text level and the image was also nearby:
ul li{ float: left; list-style-type: none; } a{ text-decoration: none; color: #464646; cursor: pointer; } .top_header{ height: 39px; } .top_header li{ padding-top: 7px; height: 32px; } .top_header img{ margin: 0 6px; } .menu li a{ border-left: 1px solid #ccc; padding: 0px 10px; height: 18px; display: block; line-height: 41px; } .menu li:hover{ background: #8ea4ca; } .menu li:hover a{ color: #fff; border: none; } .menu li:last-child a{ color: #eb1f27; } <div class="top_header"> <ul class="menu"> <li><a href="#"><span><img src="images/phone-book.png" alt=""/></span>Контакты</a></li> <li><a href="#"><span><img src="images/shopping-bag.png" alt=""/></span>Заказ</a></li> <li><a href="#"><span><img src="images/wallet.png" alt=""/></span>Оплата</a></li> <li><a href="#"><span><img src="images/pie-chart.png" alt=""/></span>Рассрочка</a></li> <li><a href="#"><span><img src="images/delivery-truck.png" alt=""/></span>Доставка</a></li> <li><a href="#"><span><img src="images/certifikate.png" alt=""/></span>Гарантия</a></li> <li><a href="#"><span><img src="images/ikonka-form.png" alt=""/></span>Отзывы</a></li> <li><a href="#"><span><img src="images/sitemap.png" alt=""/></span>Карта сайта</a></li> <li><a href="#"><span><img src="images/3-circles-inside-the-dialogue-box.png" alt=""/></span>Блог</a></li> <li><a href="#"><span><img src="images/gift-box.png" alt=""/></span>Акции</a></li> </ul> </div> Then I realized what to do as background icons, because later on they will have to change to others, but still crooked.
How to do it better?
ul li{ float: left; list-style-type: none; } a{ text-decoration: none; color: #464646; cursor: pointer; } .top_header{ height: 39px; } .top_header li{ padding-top: 7px; height: 32px; } .menu li a{ border-left: 1px solid #ccc; padding: 0px 10px 0 20px; height: 18px; display: block; line-height: 41px; } .menu li:hover{ background: #8ea4ca; } .menu li:hover a{ color: #fff; border: none; } .menu li:last-child a{ color: #eb1f27; } .menu li:nth-child(1) a{ background: url(http://www.images-store.ru/townwars_images/i/clan/icon_29.png) 5px no-repeat; } .menu li:nth-child(2) a{ background: url(http://www.images-store.ru/townwars_images/i/clan/icon_29.png) 5px no-repeat; } .menu li:nth-child(3) a{ background: url(http://www.images-store.ru/townwars_images/i/clan/icon_29.png) 5px no-repeat; } .menu li:nth-child(4) a{ background: url(http://www.images-store.ru/townwars_images/i/clan/icon_29.png) 5px no-repeat; } .menu li:nth-child(5) a{ background: url(http://www.images-store.ru/townwars_images/i/clan/icon_29.png) 5px no-repeat; } .menu li:nth-child(6) a{ background: url(http://www.images-store.ru/townwars_images/i/clan/icon_29.png) 5px no-repeat; } .menu li:nth-child(7) a{ background: url(http://www.images-store.ru/townwars_images/i/clan/icon_29.png) 5px no-repeat; } .menu li:nth-child(8) a{ background: url(http://www.images-store.ru/townwars_images/i/clan/icon_29.png) 5px no-repeat; } .menu li:nth-child(9) a{ background: url(http://www.images-store.ru/townwars_images/i/clan/icon_29.png) 5px no-repeat; } .menu li:nth-child(10) a{ background: url(http://www.images-store.ru/townwars_images/i/clan/icon_29.png) 5px no-repeat; } <div class="top_header"> <ul class="menu"> <li><a href="#"><span>Контакты</span></a></li> <li><a href="#"><span>Заказ</span></a></li> <li><a href="#"><span>Оплата</span></a></li> <li><a href="#"><span>Рассрочка</span></a></li> <li><a href="#"><span>Доставка</span></a></li> <li><a href="#"><span>Гарантия</span></a></li> <li><a href="#"><span>Отзывы</span></a></li> <li><a href="#"><span>Карта сайта</span></a></li> <li><a href="#"><span>Блог</span></a></li> <li><a href="#"><span>Акции</span></a></li> </ul> </div> Tk in my attempts it is not very clear what I want to do, here's a picture:
