1

Вопрос простой, как без лишнего говнокода (и желательно js) можно сверстать такой списочек? http://dropi.ru/a/zyq

А именно: нижнюю полоску (обводку) которая не на всю ширину, и которая пропадает при наведении у верхнего и текущего активного пункта

http://jsfiddle.net/Ygn6c/

.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>

1 ответ 1

3

Вариант с :after будет таков: http://jsfiddle.net/alpha9000/qg87P/

Вариант с jQuery может выглядеть так: http://jsfiddle.net/alpha9000/ys5Ay/

Вероятно у jQuery нет никаких преимуществ. Выбор за вами ;)

3
  • Проблема в том, что под каждым пунктом есть нижняя обводка не на всю ширину, но при наведении на пункт ховер эффект (смена цвета фона) должен быть таки на всю ширину выпадающего списка
    – Fangog
    Commented 5 сент. 2013 в 1:08
  • Обновил ответ.
    – ferrari
    Commented 5 сент. 2013 в 2:07
  • О па То, что надо, спасибо)
    – Fangog
    Commented 5 сент. 2013 в 3:29

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.