Вопрос простой, как без лишнего говнокода (и желательно js) можно сверстать такой списочек? http://dropi.ru/a/zyq
А именно: нижнюю полоску (обводку) которая не на всю ширину, и которая пропадает при наведении у верхнего и текущего активного пункта
.menu {
height: 60px;
margin: 0 auto;
background-color: #3F3F3F;
background-image: linear-gradient(to bottom, #3F3F3F, #2E2E2E);
position: relative;
}
.menu li {
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
float: left;
position: relative;
z-index: 99;
}
/* настраиваем вид ссылок */
.menu li > a {
display: block;
color: #fff;
text-decoration: none;
white-space: nowrap;
height: 60px;
padding: 0 10px;
line-height: 60px;
}
.menu li:hover > a {
background-color: #292929;
background-image: linear-gradient(to bottom, #292929, #1E1E1E);
}
/* выпадающий список */
.menu .list {
position: absolute;
display: none;
background: url(http://dropi.ru/bWv.png) 34px 5px no-repeat;
}
.menu li:hover .list {
display: block;
width: 190px;
}
/* ссылки в выпадающем списке */
.menu li:hover .list a {
display: block;
text-decoration: none;
color: #fff;
height: 35px;
line-height: 35px;
background: #282828;
border-bottom: 1px #3c3c3c solid;
}
.menu li .list a:hover {
background: #1b1b1b;
}
/* фиксим выпадающий список */
.menu .list a:first-child {
border-radius: 3px 3px 0 0;
margin: 10px 0 0 0;
}
.menu .list a:last-child {
border-radius: 0 0 3px 3px;
border-bottom: none !important;
}
<ul class="menu">
<li>
<a href="/">Меню</a>
<span class="list">
<a href="#">Пункт</a>
<a href="#">Пункт</a>
<a href="#">Пункт</a>
<a href="#">Пункт</a>
<a href="#">Пункт</a>
</span>
</li>
</ul>