AlexZaw

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

Возвращает "<h1>Hello World!</h1>". Проверьте подключение скрипта, он у вас срабатывает раньше чем построится DOM

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

Ну если не считать фиксированных размеров, то да. Не учитываете наличие фона у ссылок который перекрывает псевдоэлемент. У псевдоэлемента задан z-index:-1; это означает что он находится "под" родителем. А так как у родителя задан непрозрачный фон, то псевдоэлемент просто не видно. А также особенностей отношений позиционированных элементов. Если элементу задано абсолютное позиционирование, то он смотрит на позиционирование родителя. Если у родителя позиционирование static, то берется родитель родителя и так далее пока не будет найден родитель с позиционированием отличным от static или поиск не дойдет до тега html. Если у всех родителей позиционирование не задано то отсчет позиции ведется от края окна браузера. Если позиционирование задано, то отсчет ведется от края родителя. Поэтому я так настойчиво и советую нормально изучить основы, при знании выше сказанного у вас бы не возникло этой проблемы.

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

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

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

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

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

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

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

Заголовок то находится в блоке nav, вот только вправо вы прижимаете не весь блок nav, а только элементы с классом .href, что согласитесь, не одно и то же. Читайте, разбирайтесь, попробуйте пройти бесплатные курсы на htmlacademy. Хоть float сейчас и не очень часто используется(за исключением Bootstrap 3), но понимать его необходимо.

Потому, что вправо, с помощью float:right; вы прижали ТОЛЬКО класс .href, а у заголовка нет этого класса.

Что-то я уже совсем ничего не понимаю. в вышеприведенном коде условие выполняется? Выполняется. При чем тут запрос на 1024px? При такой ширине экрана блок должен быть растянут на 100% что и происходит. Что не так?

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

Так? body { min-height: 1500px; overflow-y: hidden; } .dropdown { display: inline-block; } .dropdown-content { z-index: 1; display: none; position: absolute; background-color: #000; width: 100%; left: 0; height: 368px; box-sizing: border-box; padding: 46px 24px 40px; } .dropdown:hover .__open { background-color: #000; color: #4a4a4a; } .dropdown:hover .dropdown-content { display: block; } @media only screen and (min-width: 1358px) { .dropdown { display: inline-block; } .dropdown-content { max-width: 1358px; left: calc((100% - 1358px)/2); } }

Так .dropdown-content должен быть с max-width:1358px; и по центру или на всю ширину окна?

.dropdown-content { z-index: 1; display:none; position: absolute; background-color: #000; width: calc(100% - 48px); height:368px; padding: 46px 24px 40px; left: 0; }

на последнем скрине у вас 6 ссылок, причем они находятся не с края экрана. В первом посте ссылка одна и одна у левого края экрана, отсюда делаем вывод что код не весь. С кодом из первого поста мой приведенный код работает нормально, даже если добавить еще несколько ссылок. В случае если вы ссылки добавляете не внутрь .dropdown, а добавляете сами блоки .dropdown вместе со ссылками внутри, то для .dropdown-content нужно добавить left: 0;

Покажите полный код

body{ margin: 0; } .dropdown-content { z-index: 1; display:none; position: absolute; background-color: #000; width: calc(100% - 48px); padding: 46px 24px 40px; }

var total = 0; var input = +prompt(); while(input){ total += input; input = +prompt(); }; alert("Общая сумма чисел равна [" + total +"]"); Или do...while: var total = 0; do{ var input = +prompt(); total += input; } while(input); alert("Общая сумма чисел равна [" + total +"]");

В смысле не та реализация? :)

Можно, просто мне с width и height привычнее :)

<div class="wrap"> <a class="" href="#">Кнопка</a> <div class=main></div> </div> a { color: #321312; position: absolute; top: 0; left: 0; z-index: 2; } .wrap { position: relative; height: 100%; } .main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #2D3142; transition: transform .7s ease-in-out; }