навигация
Nav w / Hover State
Как бы вы реализовали эту навигацию, используя HTML и CSS?
Белая коробка является заполнителем для логотипа.
PS: ссылка «Продукты» представляет собой выпадающее меню.
Моя текущая реализация ниже. (Не завершено)
#mainNav {
height: 60px;
background: url(../../images/main-nav-left.png) top left no-repeat, url(../../images/main-nav-right.png) top right no-repeat, url(../../images/main-nav-repeat.png) top repeat-x;
}
#mainNav li {
float: left;
height: 48px;
font-weight: bold;
background-color: red;
margin-top: 5px;
}
#mainNav li:not(.logo-wrapper) {
padding: 0px 47px;
font-size: 17px;
text-transform: uppercase;
}
#mainNav li a {
display: block;
background-color: green;
margin-top: 15px;
}
#mainNav li.logo-wrapper {
margin-left: 15px;
}
#mainNav h1 {
margin-top: -15px;
}
<nav class="thirteen columns" id="mainNav">
<ul>
<li class="logo-wrapper">
<h1 id="logo">
<%= link_to image_tag('logo.png'), root_path %>
</h1>
</li>
<li>
<a href="#">Products</a>
</li>
<li>
<a href="#">Parts</a>
</li>
<li>
<a href="#">Resources</a>
</li>
</ul>
</nav>
Моя главная проблема - выяснить, как заставить наклонные разделители и правый конец навигационной панели работать с состояниями наведения.