Первоначальная цель — создание хорошего якорного меню с иконками.
Вот так оно будет выглядеть:
Подключаем CSS стили:
/* Меню внутреннее начало*/
ul.list-vrv{padding:0;margin:0;float:left;width:100%;}
ul.list-vrv li {
background-image: none;
/* display: inline-block; */
vertical-align: top;
width: 132px;
height: 140px;
margin: 2px 11px 10px;
float: left;
list-style: none;
cursor: pointer;
}
ul.list-vrv li:last-child{margin: 2px 0 15px 0;}
ul.list-vrv li:first-child{margin: 2px 14px 15px 2px;}
ul.list-vrv li:hover {
outline: 2px solid #CE1C1C!important;
}
.list-vrv li a:hover .h5-vrv h5{color:#000;}
ul.list-vrv li .image-vrv{}
ul.list-vrv li .image-vrv img{width: 74%;border-radius: 45px;border: 8px solid white;margin: 3px auto 0;text-align: center; display: block;}
ul.list-vrv li .h5-vrv{padding: 0 5px;}
ul.list-vrv li .h5-vrv h5{margin:2px 0 0;color:#343434;font-size:12px;font-weight:700;font-family:'Orienta',sans-serif;overflow:hidden;padding: 0 5px;font-size: 15px; text-align: center;}
ul.list-vrv li .h5-vrv h5:hover{}
.list-vrv li:hover a .h5-vrv h5{text-decoration:underline;color:#023B8C; }
/* Меню внутреннее от web-ptica.ru - конец */
Прописываем HTML-код:
Иконки должны быть не больше чем 100 на 100 пикселей.
<ul class="list-vrv"><!-- якорное меню web-ptica.ru -->
<li><a class="thumbnail" href="#"> <!--target="_blank"-->
<div class="image-vrv"><img alt="заказ газели" src="//www.gorky-transit.ru/filesvrv/fury.jpg" /></div>
<div class="h5-vrv">
<h5 itemprop="name">Заказать газель</h5>
</div>
</a></li>
<li><a class="thumbnail" href="#"> <!--target="_blank"-->
<div class="image-vrv"><img alt="заказ газели" src="//www.gorky-transit.ru/filesvrv/fury.jpg" /></div>
<div class="h5-vrv">
<h5 itemprop="name">Заказать фуру</h5>
</div>
</a></li>
</ul>
