Как сделать такое хитрое меню?

Question

[dhat]

Столкнулся с трудностями пытаясь повторить простое с виду меню. Совсем уже ума не приложу как надо сделать.

Проблема в том, что нужно, чтоб переключение между пунктами главного меню навигации происходило мгновенно при переводе курсора, между словами как вы можете заметить есть расстояние примерно 15px. Ньюанс в том, что ПОДЧЕРКИВАНИЕ (выделение синим) нужно лишь на ширину текста а не на всю ширину элемента (т.е. элемент который активирует hover шире подчеркивания)!

www.usnews.com/news

codepen.io/dhatt/pen/RGbAkG?editors=1100

Answer 1

[Алексей]

В чем сложность то ? codepen.io/skazi_premiere/pen/xEKkPK?editors=1100

Comments

[dhat]

Наверное ни в чем, если ты не делаешь второй макет сайта в жизни, как я)) СПАСИБО!

[Алексей]

dhat: тогда очень рекомендую погуглить "30css селекторов которые должен знать каждый".

[dhat]

Сложность в непонимании мною этих редких селекторов и неумением использвать > и тд

[dhat]

Ах да, проблема-то осталась - ссылки не распространяются на всю ширину элемента! Т.е. ховер работает, а ссылка нет.

[Алексей]

dhat: поправил.

[dhat]

Спасибо еще раз - я разобрался :)

Answer 2

[V Sh.]

Если у вас есть такое: li > a > span, то можно так:

li > a {
   padding: 10px;
}
li: hover {
  background-color: white;
}
li: hover > a > span {
  border-bottom: 2px solid black;
}

Comments

[V Sh.]

К сожалению могу только на словах объяснить, т.к. интерактивные сайты на работе не открываются. Суть в том, чтобы обрабатывать наведение на родительском элементе, а на дочернем показывать эффект.

[dhat]

У меня заработало в таком варианте

.main_menu-list a:hover > span {
color: #f1f5fc;
padding-bottom: 10px;
border-bottom: 5px solid #2c7ef0;
}

Спасибо.

[V Sh.]

dhat: Ну и хорошо. Только вот динамический паддинг на элементе в меню не есть очень хорошо. Текст не прыгает при наведении?)

[dhat]

V Sh.: нет, в Хроме все нормально. Думаете может глючить при определенных условиях?

[V Sh.]

dhat: А, все понял. SPAN - это строчный элемент. На него вертикальные отступы не работают. Поэтому ваша строчка padding-bottom, по сути, бесполезна) Измените ее, например, на padding-left и увидите как текст начнет смещаться при наведении.

[dhat]

V Sh.: нет она не бесполезна, эта строчка задает местоположение нижнего подчеркивания (бордера)

[V Sh.]

dhat: Доберусь до дома посмотрю. Всегда думал, что padding - это внутренний отступ для элементов и он никакого эффекта на границу не имеет. Возможно, что просто внутренний элемент как бы выпадает из своего родителя и поэтому граница рисуется ниже... Можете скинуть сюда код html и css? Отрисую, посмотрю)

[dhat]

В итоге я поменял код, вот так работает тоже:

.main_menu-list a:hover> span {
color: #f1f5fc;
display: block;
height: 44px;
border-bottom: 4px solid #2c7ef0;
}