transition

[Неугомонный]

В общем понял чуть чуть transition что margin-top это к чему мы применяем,  1s; это время за сколько выполниться смещение к margin-top: 0;, но сижу ломаю голову как заставить салатовую полоску  border-right заполнять весь блок справа на лево при наведении на блок с ссылка? 

https://jsfiddle.net/nzw4ghkq/

Edited July 31, 2019 by Неугомонный

[AlexZaw]

18 минут назад, Неугомонный сказал:

как заставить салатовую полоску  border-right заполнять весь блок

А как вы себе это представляете? :) border на то и border что идет по краю элемента, но никак не внутри элемента.
Даже название на это намекает :)

[Неугомонный]

1 минуту назад, AlexZaw сказал:

А как вы себе это представляете? :) border на то и border что идет по краю элемента, но никак не внутри элемента.
Даже название на это намекает :)

Я не представляю себе никак, я только пытаюсь и много еще не понимаю 

Как такую задумку сделать подтолкните ))

[AlexZaw]

Только что, Неугомонный сказал:

Как такую задумку сделать

Сделайте с помощью псевдоэлемента. Изначально его расположите за границей блока с ссылкой, и по наведению смещайте влево

[Неугомонный]

1 минуту назад, AlexZaw сказал:

Сделайте с помощью псевдоэлемента. Изначально его расположите за границей блока с ссылкой, и по наведению смещайте влево

::before ?

[AlexZaw]

1 минуту назад, Неугомонный сказал:

::before ?

Без разницы хоть :before,  хоть :after

[Неугомонный]

7 минут назад, AlexZaw сказал:

Без разницы хоть :before,  хоть :after

Через background-color ? Заливать

[AlexZaw]

2 минуты назад, Неугомонный сказал:

Через background-color

А как вы хотите двигать background-color? Я же выше написал что двигать нужно сам псевдоэлемент, с уже залитым фоном.

Делаете ему абсолютное позиционирование, выносите за границу родителя, и по наведению смещаете влево.

[Неугомонный]

30 минут назад, AlexZaw сказал:

А как вы хотите двигать background-color? Я же выше написал что двигать нужно сам псевдоэлемент, с уже залитым фоном.

Делаете ему абсолютное позиционирование, выносите за границу родителя, и по наведению смещаете влево.

https://jsfiddle.net/c16ypvgo/

Что то у меня ничего не получается ..

Edited July 31, 2019 by Неугомонный

[AlexZaw]

3 минуты назад, Неугомонный сказал:

Что то у меня ничего не получается ..

Потому, что вы не слушаете что вам говорят. Я вам говорю о перемещении псевдоэлемента, а вы, зачем-то, пытаетесь задать transition для фона, к тому же не правильно. Даже если появиться он у вас плавно, он появиться по всей фигуре сразу, а не так как вам нужно. Мой вам совет, бросайте вы учить html и css кусками. Начните учить нормально. Иначе вы ничего не добьетесь.

Потратьте примерно неделю на прохождение бесплатных уроков на той-же htmlacademy,  толку будет гораздо больше чем от нынешних попыток сделать что-то не понимая как это работает.

[Неугомонный]

Завтра разберусь

Edited July 31, 2019 by Неугомонный

[Неугомонный]

2 часа назад, AlexZaw сказал:

Потому, что вы не слушаете что вам говорят. Я вам говорю о перемещении псевдоэлемента, а вы, зачем-то, пытаетесь задать transition для фона, к тому же не правильно. Даже если появиться он у вас плавно, он появиться по всей фигуре сразу, а не так как вам нужно. Мой вам совет, бросайте вы учить html и css кусками. Начните учить нормально. Иначе вы ничего не добьетесь.

Потратьте примерно неделю на прохождение бесплатных уроков на той-же htmlacademy,  толку будет гораздо больше чем от нынешних попыток сделать что-то не понимая как это работает.

Мне кажется можно обойтись без before и after https://jsfiddle.net/q29sck31/

Edited July 31, 2019 by Неугомонный

[AlexZaw]

9 часов назад, Неугомонный сказал:

Мне кажется можно обойтись без before и after

Можно, но придется использовать обычный элемент. Ваш вариант с изменением ширины тоже можно использовать, но только, опять же, не для самой ссылки. Иначе она изначально будет очень маленькой и вам придется попадать курсором в эти самые 5 пикселей чтобы ссылка показалась. Отсюда вывод - придется использовать какой-то другой элемент. Псевдо или обычный. Можно конечно и ваш вариант, с изменением ширины у ссылки, подправить, но тогда придется делать обертку для самой ссылки, а это опять же добавлять новый элемент, и плюс задавать ширину для этой обертки.

То что вы ищете разные способы решения проблемы это очень хорошо, но вот то, что вы не совсем понимаете то что делаете это плохо. Я вам еще раз советую - пройдите бесплатные уроки на htmlacademy, это даст вам более-менее нормальную базу для дальнейшего изучения. По крайней мере вы сможете сходу отметать некоторые нерабочие варианты решения проблемы, что опять же сэкономит вам время в дальнейшем.

[Неугомонный]

1 час назад, AlexZaw сказал:

Можно, но придется использовать обычный элемент. Ваш вариант с изменением ширины тоже можно использовать, но только, опять же, не для самой ссылки. Иначе она изначально будет очень маленькой и вам придется попадать курсором в эти самые 5 пикселей чтобы ссылка показалась. Отсюда вывод - придется использовать какой-то другой элемент. Псевдо или обычный. Можно конечно и ваш вариант, с изменением ширины у ссылки, подправить, но тогда придется делать обертку для самой ссылки, а это опять же добавлять новый элемент, и плюс задавать ширину для этой обертки.

То что вы ищете разные способы решения проблемы это очень хорошо, но вот то, что вы не совсем понимаете то что делаете это плохо. Я вам еще раз советую - пройдите бесплатные уроки на htmlacademy, это даст вам более-менее нормальную базу для дальнейшего изучения. По крайней мере вы сможете сходу отметать некоторые нерабочие варианты решения проблемы, что опять же сэкономит вам время в дальнейшем.

https://jsfiddle.net/p3ahomcL/ Вот ну всё же получилось и вроде правильно

 

а как себе начал переносить нифига не выходит, что  я не так делаю? 

https://jsfiddle.net/jqgaut9y/2/ 

Edited August 1, 2019 by Неугомонный

[AlexZaw]

11 минут назад, Неугомонный сказал:

Лучше подскажи как эту фигню фиксануть

Добавить для .dropdown-menu свойство z-index:1; и для .dropdown-item свойство position:relative;

[Неугомонный]

2 минуты назад, AlexZaw сказал:

Добавить для .dropdown-menu свойство z-index:1; и для .dropdown-item свойство position:relative;

спасибо, а так я всё правильно замутил?  )))

Edited August 1, 2019 by Неугомонный

[AlexZaw]

4 минуты назад, Неугомонный сказал:

спасибо, а так я всё правильно замутил?  )))

Ну если не считать фиксированных размеров, то да.

24 минуты назад, Неугомонный сказал:

а как себе начал переносить нифига не выходит, что  я не так делаю? 

Не учитываете наличие фона у ссылок который перекрывает псевдоэлемент.
У псевдоэлемента задан z-index:-1; это означает что он находится "под" родителем. А так как у родителя задан непрозрачный фон, то псевдоэлемент просто не видно.

А также особенностей отношений позиционированных элементов.
Если элементу задано абсолютное позиционирование, то он смотрит на позиционирование родителя. Если у родителя позиционирование static, то берется родитель родителя и так далее пока не будет найден родитель с позиционированием отличным от static или поиск не дойдет до тега html. Если у всех родителей позиционирование не задано то отсчет позиции ведется от края окна браузера. Если позиционирование задано, то отсчет ведется от края родителя.

Поэтому я так настойчиво и советую нормально изучить основы, при знании  выше сказанного у вас бы не возникло этой проблемы.

[Неугомонный]

13 минут назад, AlexZaw сказал:

Ну если не считать фиксированных размеров, то да.

Т.е про width: 230px; ?

[AlexZaw]

8 минут назад, Неугомонный сказал:

Т.е про width: 230px; ?

Да, но это, в принципе не критично и подойдет для большинства экранов.

[Неугомонный]

26 минут назад, AlexZaw сказал:

Да, но это, в принципе не критично и подойдет для большинства экранов.

@media only screen and (min-width: 1280px) 

я это предусмотрел в чистовике скажем так ,Задано 

Edited August 1, 2019 by Неугомонный

[Неугомонный]

4 часа назад, AlexZaw сказал:

Да, но это, в принципе не критично и подойдет для большинства экранов.

Как выровнять ссылка 3 чтобы была по правому краю над  ссылками что выпадают? 

[AlexZaw]

7 минут назад, Неугомонный сказал:

Как выровнять ссылка 3

По хорошему нужно не ссылку ровнять, а именно выпадающее меню по ссылке