Здравствуйте!
Ломал сегодня голову над тем, как красиво сверстать декоративную линию в навигации. Скрин меню приложил, нужно сверстать линию между элементами.
Сейчас линия - это фоновая картинка, но что-то мне говорит, что так оставлять нельзя, слишком легкий способ, да и запрос дополнительный.
Html:
<ul class="mainnav">
<li><a href="/events">События</a></li>
<li><a href="/site/about-us.html">О проекте</a>
<ul>
<li><a href="/site/contact.html">Контакты</a></li>
<li><a href="/site/we.html">Сотрудники</a></li>
</ul>
</li>
</ul>
Часть кода CSS
.mainnav li {
margin-top: 4px;
padding: 9px 15px 8px 10px;
display: inline-block;
position: relative;
background: url(img/mainmenu-line.jpg) no-repeat right -4px
}
ul.mainnav>li:hover {
background: #0c8b5d
}
Скрин:
Первое, что пришло на ум, box-shadow. Но верстать стал не так давно, получится ли? Потом пробовал добавить тег span и в нем указать два тега: border-left и border-right, может еще есть идеи или опыт верстки подобных линий?
Здесь линия нужна из 2 цветов, этого будет достаточно, чтобы забыть про фоновую картинку.
Спасибо.
