Ниспадающее меню средствами CSS.

@LeD4eG · Регистрация: 29.09.2009

Студворк — интернет-сервис помощи студентам

вторую неделю бьюсь над ниспадающим меню!помогите пожалуйста!
цель: при наведении на пункт навигационного меню "Услуги" должно появляться ниспадающее меню с ссылками.
проблема в том, что при наведении-то меню появляется, но вот ссылки в этом меню не доступны для клика. в Mozilla "пройтись" мышкой по ним можно через раз. в остальных браузерах (Chrome, Opera, Safari, IE9) - ниспадающее меню только появляется.
да, я знаю, что в большинстве случаев подобные меню создаются при помощи JavaScript, но этот макет является учебным, я новичок, и моя задача реализовать эту технологию с помощью CSS. я перечитал уже множество статей по этому поводу, поэтому обвинять меня в том, что я лентяй и ленусь погуглить, не надо. объясните, пожалуйста, что я делаю не так?
http://for-help001.hut2.ru

@vasvas7775 · 26.02.2011, 19:04

на этот случай можно использовать тег <noscript></noscript> с сообщением между ним, о не корректной работе сайта, без JS. у кого он выключен будет видеть сообщение. Этот тег не поддерживает только Опера 11

@LeD4eG · 26.02.2011, 19:09 **[ТС]**

Alorian, пробовал уже выставить top: 100%. в Mozilla проблема возвращается. поэтому поставил top: 16px с небольшим наездом.
но ведь суть именно такая.

@vasvas7775 · 26.02.2011, 19:12

padding-bottom:3px; должно хватить

@LeD4eG · 26.02.2011, 19:16 **[ТС]**

vasvas7775, там фон самого выпадающего меню ссылки закрывает. добавил z-index для главного меню. теперь выпадающее меню немного "накрывает" только родительский пункт.

@Alorian · 26.02.2011, 19:21

Сообщение от LeD4eG

пробовал уже выставить top: 100%. в Mozilla проблема возвращается. поэтому поставил top: 16px с небольшим наездом.

Да, действительно. Если специально медленно мышкой вести, то пропадает меню. Я когда тестировал нормально все было.
Можно на самом деле еще подумать над наездом, или по крайней мере уменьшить его, но если и так нормально, то я рад.

@vasvas7775 · 26.02.2011, 19:23

работает как надо? если что посмотри в моем коде CSS я его немного оптимизировал, что бы работало нормально.

@LeD4eG · 26.02.2011, 19:33 **[ТС]**

Alorian, у меня, конечно, возникло пару вопросов, если интересно: как сделать, чтобы при возникновении выпадающего меню родительская ссылка оставалась чёрной.
а z-index'ом никак проблему перекрытия не решить?

@Alorian · 26.02.2011, 19:56

Сообщение от LeD4eG

как сделать, чтобы при возникновении выпадающего меню родительская ссылка оставалась чёрной.

CSS
1
2
3
4
5
        #main_nav li a:hover, #main_nav li:hover a{
            color:#000;
        }
        #main_nav li:hover ul a{color:#8b6619;}
        #main_nav li:hover ul a:hover{color:#000;}

Сообщение от LeD4eG

а z-index'ом никак проблему перекрытия не решить?

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

@LeD4eG · 27.02.2011, 11:17 **[ТС]**

Alorian, vasvas7775, хотел бы понять ещё одну ситуацию. если увеличивать масштаб страницы, то логотип ползёт влево, а блок с контентом вправо. почему так происходит?и как этого избежать?
у меня возникает только одна мысль по этому поводу. объединить логотип с контентом в один блок, задать ему меньшие размеры и выставить поля....я прав?

@vasvas7775 · 27.02.2011, 11:58

В принципе да. Задать все в один блок. И от центровать по центру монитора.

@LeD4eG · 27.02.2011, 12:47 **[ТС]**

vasvas7775, интересно....всё равно ползёт...хоть и меньше. ширина background 1000px...интересно.

@Alorian · 27.02.2011, 13:47

LeD4eG, ты какие то неочевидные решения применяешь.
Вместо того чтобы делать margin контента от верха, нужно просто сделать <div id="header"></div> той же высоты что и margin сейчас. У тебя есть content и footer, почему нет header?

Блокам header, content, footer желательно задать одинаковую ширину в процентах и отцентровать их с помощью margin:0 auto. Или еще лучше положить их все в один контейнер с процентной шириной, его отцентровать, а header, content, footer просто будут 100% ширины и без центровки. У логотипа фиксированная ширина, поэтому его лучше всего отцентровать с помощью margin:0 auto уже внутри блока header.

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

P.S. И да, новые вопросы все таки лучше задавать в отдельной теме.

@LeD4eG · 27.02.2011, 14:27 **[ТС]**

Alorian, хорошо, значит надо заняться.

Новые блоги и статьи Все статьи Все блоги /
GitHub Copilot в JetBrains: модель по умолчанию, Fix и контроль MCP and_y87 12.10.2026 10 октября 2026 года GitHub обновил Copilot для JetBrains: добавил настройки стартовой модели, исправления из диагностики и управление автозапуском MCP. Поддержка IDE 2025. 1 прекращена — требуется. . .	День 5 из 28: Codex подсказывает следующий запрос and_y87 12.10.2026 9 октября 2026 года OpenAI запустила бету Composer predictions — подсказок следующего сообщения в текущем диалоге Codex. Это помощь с формулировкой запроса, а не автоматическое продолжение задачи. . . .	Запустил конкурс "тем и промптов для текстовых квестов созданных почти чисто ИИ" Adler 06.10.2026 Всем привет! За последние три-четыре дня я создал более 16 текстовых квестовых игр используя преимущественно по одному запросу к ИИ на игру. Мне так понравилось смотреть все ветки/ сцены во всех. . .	ИИ не может найти нужный язык в списке Supersumestria 05.10.2026 Я ему даю вот такое изображение и прошу найти и подчеркнуть немецкий язык. Возвращает он вот это: https:/ / i. **********/ vqBWLe2. png Нужную строчку в 3й колонке просто выдумал. . Это. . .
Новая последняя моя музыка в SUNO zorxor 05.10.2026 Здравствуйте, дорогие мои друзья! С большой радостью я хотел бы представить вам свою новую последнею музыку, которую сгенерировала мне по моей просьбе нейросеть SUNO. С уважением, zorxor. Это. . .	Программный домашний кинотеатр russiannick 27.09.2026 Сподобился на программный домашний кинотеатр. В качестве ЯВУ по традиции выбрал js. В помощники взял Яндекс-Алису. Было создано три зала на разные интересы. исторические и ретро сериал Хичкок. . .	Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого zorxor 21.09.2026 Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .	Мобильное приложение ColorStep pavlinmavlin 17.09.2026 Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .

@LeD4eG 14 / 14 / 0 Регистрация: 29.09.2009 Сообщений: 79

	Ниспадающее меню средствами CSS. 26.02.2011, 14:16. Показов 11012. Ответов 32 Метки нет (Все метки) вторую неделю бьюсь над ниспадающим меню!помогите пожалуйста! цель: при наведении на пункт навигационного меню "Услуги" должно появляться ниспадающее меню с ссылками. проблема в том, что при наведении-то меню появляется, но вот ссылки в этом меню не доступны для клика. в Mozilla "пройтись" мышкой по ним можно через раз. в остальных браузерах (Chrome, Opera, Safari, IE9) - ниспадающее меню только появляется. да, я знаю, что в большинстве случаев подобные меню создаются при помощи JavaScript, но этот макет является учебным, я новичок, и моя задача реализовать эту технологию с помощью CSS. я перечитал уже множество статей по этому поводу, поэтому обвинять меня в том, что я лентяй и ленусь погуглить, не надо. объясните, пожалуйста, что я делаю не так? http://for-help001.hut2.ru 0

@vasvas7775 Обитатель 539 / 317 / 42 Регистрация: 24.12.2010 Сообщений: 795
	26.02.2011, 19:04
	на этот случай можно использовать тег <noscript></noscript> с сообщением между ним, о не корректной работе сайта, без JS. у кого он выключен будет видеть сообщение. Этот тег не поддерживает только Опера 11 0

@LeD4eG 14 / 14 / 0 Регистрация: 29.09.2009 Сообщений: 79
	26.02.2011, 19:09 [ТС]
	Alorian, пробовал уже выставить top: 100%. в Mozilla проблема возвращается. поэтому поставил top: 16px с небольшим наездом. но ведь суть именно такая. 0

@vasvas7775 Обитатель 539 / 317 / 42 Регистрация: 24.12.2010 Сообщений: 795
	26.02.2011, 19:12
	padding-bottom:3px; должно хватить 1

@LeD4eG 14 / 14 / 0 Регистрация: 29.09.2009 Сообщений: 79
	26.02.2011, 19:16 [ТС]
	vasvas7775, там фон самого выпадающего меню ссылки закрывает. добавил z-index для главного меню. теперь выпадающее меню немного "накрывает" только родительский пункт. 0

@vasvas7775 Обитатель 539 / 317 / 42 Регистрация: 24.12.2010 Сообщений: 795
	26.02.2011, 19:23
	работает как надо? если что посмотри в моем коде CSS я его немного оптимизировал, что бы работало нормально. 0

@LeD4eG 14 / 14 / 0 Регистрация: 29.09.2009 Сообщений: 79
	26.02.2011, 19:33 [ТС]
	Alorian, у меня, конечно, возникло пару вопросов, если интересно: как сделать, чтобы при возникновении выпадающего меню родительская ссылка оставалась чёрной. а z-index'ом никак проблему перекрытия не решить? 0

@LeD4eG 14 / 14 / 0 Регистрация: 29.09.2009 Сообщений: 79
	27.02.2011, 11:17 [ТС]
	Alorian, vasvas7775, хотел бы понять ещё одну ситуацию. если увеличивать масштаб страницы, то логотип ползёт влево, а блок с контентом вправо. почему так происходит?и как этого избежать? у меня возникает только одна мысль по этому поводу. объединить логотип с контентом в один блок, задать ему меньшие размеры и выставить поля....я прав? 0

@vasvas7775 Обитатель 539 / 317 / 42 Регистрация: 24.12.2010 Сообщений: 795
	27.02.2011, 11:58
	В принципе да. Задать все в один блок. И от центровать по центру монитора. 0

@LeD4eG 14 / 14 / 0 Регистрация: 29.09.2009 Сообщений: 79
	27.02.2011, 12:47 [ТС]
	vasvas7775, интересно....всё равно ползёт...хоть и меньше. ширина background 1000px...интересно. 0

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	27.02.2011, 13:47
	LeD4eG, ты какие то неочевидные решения применяешь. Вместо того чтобы делать margin контента от верха, нужно просто сделать <div id="header"></div> той же высоты что и margin сейчас. У тебя есть content и footer, почему нет header? Блокам header, content, footer желательно задать одинаковую ширину в процентах и отцентровать их с помощью margin:0 auto. Или еще лучше положить их все в один контейнер с процентной шириной, его отцентровать, а header, content, footer просто будут 100% ширины и без центровки. У логотипа фиксированная ширина, поэтому его лучше всего отцентровать с помощью margin:0 auto уже внутри блока header. В общем много чего можно еще сказать, но лучше попробуй все с нуля переверстать пользуясь полученными в первой версии знаниями, иногда подглядывая но не сдирая огромные куски кода. P.S. И да, новые вопросы все таки лучше задавать в отдельной теме. 0

@LeD4eG 14 / 14 / 0 Регистрация: 29.09.2009 Сообщений: 79
	27.02.2011, 14:27 [ТС]
	Alorian, хорошо, значит надо заняться. 0