Css сделать горизонтальное меню с разными частями. Выпадающее меню на CSS

Доброго времени суток всем, кто сейчас читает данную публикацию. Сегодня я хочу рассказать вам об одном из инструментов сайтостроения, без которого ни один веб-ресурс не может обойтись. Это меню сайта, или как еще говорят карта сайта. На сегодняшний день существует безграничное множество видов и подвидов меню.

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

Инструменты для создания панели навигации

В языке разметки существует несколько способов создания меню. Основная их концепция заключается в использовании ненумерованного списка. Таким образом, в привычном для нас html 4 разработчики прописывают на станице теги

и
• .

  Как оговаривалось в предыдущих публикациях, парный элемент

  создает маркированный список, а
  • — один элемент списка. Для наглядности давайте напишем код простого меню:

    Навигация сайта

    • Главная
    • Новости недели
    • Технологические достижения
    • Чат

    Однако с появлением платформы язык разметки пополнился дополнительными тегами. Именно поэтому меню современных веб-сайтов создается при помощи специального тега < menu> . В использовании этот элемент ничем не отличается от маркированных списков.

    Вместо единицы < ul> прописывается < menu> . Однако существенные различия появляются если судить со стороны работы . Так, второй пример ускоряет работу поисковых программ и роботов в . При анализе структуры сайта они сразу понимают, что данный кусок кода отвечает за карту сайта.

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

    Создадим-ка горизонтальную навигационную модель

    Такой вид навигации наиболее популярен. При горизонтальном оформлении панели все пункты меню расположены в шапке страницы или в «подвале» (иногда навигационные элементы дублируются, отображаясь одновременно и сверху, и снизу).

    В качестве примера мы создадим горизонтальную панель, пункты меню которого будут оформлены при помощи css (каскадных таблиц стилей), а точнее трансформированы. Так, каждый отдельный элемент будет находится в скошенном прямоугольнике. Заинтриговал?

    Для трансформации мы используем свойство css под названием transform . Чтобы указать трансформацию, используется встроенная функция skewX , в которой угол наклона указывается в градусах.

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

    • -ms- (Internet Explorer)
    • -o- (Opera)
    • -webkit- (Chrome, Safari)
    • -moz- (Firefox)

    А теперь полученные знания применим к написанию примера.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

    Главная О компании Продукция Контакты

    Главная
    О компании
    Продукция
    Контакты

    А теперь вертикально. Я сказал вертикально!

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

    Для этого я воспользовался еще одним свойством css border-radius .

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

    Главная
    О компании
    Продукция
    Контакты

    Как вы уже заметили, главное изменение в этом коде – это отсутствие объявления display: inline-block , который собственно и отвечал за горизонтальное расположение пунктов навигации.

    Подпункты в меню: выпадающий список

    Мы с вами рассмотрели основные группы навигационных панелей, однако существует еще несколько разновидностей или лучше сказать дополнений.

    

    Иногда возникают такие ситуации, когда некоторые из пунктов дополняют основные. В этом случае не обойтись без выпадающих списков. Они создаются путем преобразований инструментами css.

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

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

    Главная Продукция Конфеты Торты Печенье Контакты

    • Главная
    • Продукция
      • Конфеты
      • Торты
      • Печенье
    • Контакты

    Люди часто используют JavaScript, чтобы сделать выпадающее меню. Но на самом деле это можно сделать на чистом CSS. И в этом уроке вы узнаете, как это сделать.

    Принцип работы

    Для начала, чтобы вы поняли принцип работы выпадающих элементов, разберём простой пример. Возьмём простой html-код для работы:

    Наведи на меня курсор >

    я - скрытая часть

    и применим к этому коду такие стили:

    Example_shown { display:inline-block; } .example_hidden { display:none; } .example_shown:hover .example_hidden { display:inline-block; }

    В css мы скрыли нужную часть текста, изменив его отображение на display:none;. При наведении курсора (:hover) на родительский элемент.example_shown у дочернего элемента.example_hidden меняется тип отображения на видимый. По такому принципу и строятся выпадающие меню.

    Создание выпадающего меню

    Теперь займёмся реализацией самого меню. Для его организации воспользуемся тегами списков ul и li

    • Раздел1
    • Раздел2
      • Подраздел1
      • Подраздел2
      • Подраздел3
    • Раздел2
      • Подраздел1
      • Подраздел2
      • Подраздел3
      • Подраздел4
      • Подраздел5
      • Подраздел6
      • Подраздел7

    Как видно из кода, основной список с id = «menu» у нас будет отвечать за видимые разделы меню. В разделы мы вкладываем ещё один список ul, содержащий в себе выпадающие ссылки при наведении на заголовок раздела меню. Теперь применим к этому набору элементов следующие стили:

    /*Обнуляем отступы*/ ul, li { margin:0; padding:0; list-style-type:none; } /*Задаём параметры блока, содержащего основное меню*/ #menu { display:block; position:absolute; top:100px; left:50px; } /*Задаём стили для разделов нашего меню*/ #menu > li { display:inline-block; height:20px; position:relative; } /*Стили для скрытого выпадающего меню*/ #menu > li > ul { position:absolute; top:20px; display:none; } /*Делаем скрытую часть видимой*/ #menu > li:hover > ul { display:block; }

    В данных стилях я хочу акцентировать внимание на четырёх вещах:

    1. Обратите внимание на этот символ #menu > li в стилях. Он обозначает, что стили будут применяться не ко всем элементам li, расположенным внутри ul#menu, а только к тем, кто является непосредственным потомком тега ul#menu.
    2. У разделов меню позиционирование изменено на position:relative. Дело в том, что обычный тег с position:absolute ведёт отсчёт координат позиционирования от левого верхнего угла окна браузера. Но если такой тег вложить внутрь тега с position:relative, отсчёт будет вестись от угла этого тега.
       Таким образом, мы сможем привязать выпадающие списки не к какой-то координате относительно окна, а к координате относительно раздела основного меню. Собственно top:20px и задаёт смещение по вертикали от верхней границы главного раздела.
    3. Параметр top у #menu > li > ul должен равняться сумме параметров #menu > li таких как height + padding-top + padding-bottom. В данном случае последние два параметра не указаны, их значение наследуется из самого первого стиля и равно нулю. Значение height = 20. Значит отступ у нашего выпадающего списка будет равен 20 + 0 + 0 = 20px
    4. Когда мы переведём курсор на пункты выпавшего списка (#menu > li > ul > li), каждый элемент li этого списка будет попадать под событие наведения курсора hover. При этом он является вложенным в список ul, который в свою очередь вложен в #menu > li. Событие hover при этом будет передаваться от #menu > li > ul > li всем родительским элементам, в том числе и #menu > li. Из-за этого список не будет схлопываться обратно несмотря на то, что мы не держим курсор непосредственно над #menu > li.

    Заключение

    Выпадающие списки — довольно удобный способ разместить большое меню на маленьком пространстве. Но у этого способа есть колоссальный минус: он не будет работать на мобильных устройствах. Почему? Потому что у них в принципе нет понятия наведения курсора. У них есть клики, перетягивания. Но наведения курсора нет. Так что не забудьте об этих пользователях и сделайте для них отдельную реализацию меню.

    От автора: всех приветствую. Почему-то выпадающее меню у веб-мастеров ассоциируется со скриптами, но уже давно сделать такую навигацию можно абсолютно спокойно на чистом css. Причем такое меню будет ничем не хуже. Сегодня я вам покажу, как создать в css выпадающее меню. Поделюсь, так сказать, рецептом.

    План урока и разметка нашего меню

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

    Собственно, я сразу напишу в html разметку с вложенными списками. То есть наши список будет двухуровневым – в нем будут другие списки. А именно, на каждый пункт 1 список, который и будет формировать выпадающее меню.

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

    Собственно, вот она, вся разметка:

    < nav id = "nav" > < ul > < li > < a href = "#" > Пункт1 < / a > < ul class = "second" > < li > < a href = "#" > Подпункт< / a > < / li > < li > < a href = "#" > Подпункт< / a > < / li > < li > < a href = "#" > Подпункт< / a > < / li > < / ul > < / li > < li > < a href = "#" > Пункт2 < / a > < ul class = "second" > < li > < a href = "#" > Подпункт< / a > < / li > < li > < a href = "#" > Подпункт< / a > < / li > < li > < a href = "#" > Подпункт< / a > < / li > < / ul > < / li > < li > < a href = "#" > Пункт3 < / a > < ul class = "second" > < li > < a href = "#" > Подпункт< / a > < / li > < li > < a href = "#" > Подпункт< / a > < / li > < li > < a href = "#" > Подпункт< / a > < / li > < / ul > < / li > < li > < a href = "#" > Пункт4 < / a > < ul class = "second" > < li > < a href = "#" > Подпункт< / a > < / li > < li > < a href = "#" > Подпункт< / a > < / li > < li > < a href = "#" > Подпункт< / a > < / li > < / ul > < / li > < / ul > < / nav >

    Я понимаю, что она огромна. В этом-то и проблема вложенных списков, что требуется писать много кода. Но учитывайте тот факт, что мы делаем 4 основных пункта и для каждого будет выпадающее меню.

    Собственно, я задал всей навигации идентификатор nav, а всем вложенным спискам – стилевой класс second, чтобы понимать, что они являются вложенными.

    Отлично, разметка у нас готова, можно посмотреть на результат:

    

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

    Пишем css-стили

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

    *{ margin: 0; padding: 0; }

    margin : 0 ; padding : 0 ;

    #nav{ height: 70px; } #nav ul{ list-style: none; }

    #nav{ height : 70px ; #nav ul{ list - style : none ;

    Теперь нам нужно, собственно, решить, каким будет наше меню. Горизонтальным или вертикальным? Я предлагаю сначала сделать горизонтальное и посмотреть все на его примере. Для этого нужно написать такие стили:

    #nav > ul > li{ float: left; width: 180px; position: relative; }

    #nav > ul > li{ float : left ; width : 180px ; position : relative ;

    Заметьте, что с помощью знака > мы обращаемся к пунктам списка, который непосредственно вложены в ul, а тот непосредственно вложен в nav. Это очень важно, так как позволяет не применить стиль к пунктам вложенных списков. Дело в том, что по моей задумке в главном списке пункты будут располагаться горизонтально, а во вложенных – вертикально.

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

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

    Для чего позиционирование? Оно необходимо для того, чтобы потом абсолютно позиционировать вложенные списки. Если вы изучали позиционирование в css, то наверняка знаете, что если задать блоку относительное позиционирование, то все элементы в нем можно будет позиционировать абсолютно внутри именно этого блока, а не всего окна браузера.

    Тем временем, вот что у нас уже получилось:

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

    #nav li a{ display: block; background: #90DA93; border: 1px solid #060A13; color: #060A13; padding: 8px; text-align: center; text-decoration: none; } #nav li a:hover{ background: #2F718E; }

    #nav li a{ display : block ; background : #90DA93; border : 1px solid #060A13; color : #060A13; padding : 8px ; text - align : center ; text - decoration : none ; #nav li a:hover{ background : #2F718E;

    Во-первых, сами ссылки нужно сделать блочными. Это необходимо для того, чтобы работали внутренние отступы и корректно применялись все свойства. Далее указываю цвета фона, текста, параметры рамки, внутренние отступы и выравнивание текста по центру. Наконец, отменяю подчеркивание ссылок.

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

    Заметьте, что в данном случае мы не использовали знак >, поэтому указанные правила применятся ко всем ссылкам, в том числе и тем, что находятся во вложенных пунктах. Итак, теперь имеем следующее:

    

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

    #nav li .second{ display: none; position: absolute; top: 100%; }

    #nav li .second{ display : none ; position : absolute ; top : 100 % ;

    Во-первых, скрываем полностью вложенные списки. Во-вторых, задаем им абсолютное позиционирование и координату top: 100%. Это означает, что выпадающее меню будет отображаться четко под основным пунктом, которому принадлежит, четко под 100% высоты этого пункта.

    Теперь мы видим на веб-странице только основное меню, что нам и нужно.

    Реализуем выпадение

    Нам осталось сделать самое главное – реализовать само выпадение. В этом нет ничего сложного, смотрите на этот код:

    #nav li:hover .second{ display: block; }

    #nav li:hover .second{ display : block ;

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

    

    Есть только одна незначительная проблема – ширина вложенных пунктов не соответствует ширине основных. Но это очень легко решается дописыванием соответствующих стилей:

    #nav li li{ width: 180px; }

    #nav li li{ width : 180px ;

    Все, проблема решена:

    

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

    Переделываем меню в вертикальное

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

    Во-первых, вам нужно будет убрать float:left у главных пунктов списка. Именно это свойство способствует тому, что наши пункты отображаются в одну строку, но зачем нам это, если навигация должна быть вертикальной?

    Теперь остается изменить правила для селектора #nav li .second, то есть для вложенных списков, а именно, их нужно немного по-другому позиционировать. Вот так:

    #nav li .second{ display: none; position: absolute; left: 100%; top: 0; }

    #nav li .second{ display : none ; position : absolute ; left : 100 % ; top : 0 ;

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

    Поэтому изменяем top: 100% на left: 100%. Кроме этого, координата top нам тоже нужна. Задаем ей 0, чтобы вложенное меню находилось на одном уровне с пунктом, которому соответствуют.

    

    Все, теперь все работает так, как надо. Можете протестировать. Как видите, я не врал, когда говорил, что придется переписать всего несколько строк кода.

    Горизонтальное меню с несколькими уровнями

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

    Хабр, привет!

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

    Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest , это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).

    Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.
    
    В этом обзоре мы рассмотрим многоуровневые меню.

    Flat Horizontal Navigation

    

    Красивая навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по использованным возможностям, работает в ie8+.
    http://codepen.io/andytran/pen/kmAEy

    Material Nav Header w/ Aligned Dropdowns

    

    Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
    http://codepen.io/colewaldrip/pen/KpRwgQ

    Smooth Accordion Dropdown Menu

    

    Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
    http://codepen.io/fainder/pen/AydHJ

    Pure CSS Dark Inline Navigation Menu

    

    Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
    http://codepen.io/3lv3n_snip3r/pen/XbddOO

    Pure CSS3 Mega Dropdown Menu With Animation

    

    

    Стильное меню с двумя форматами вывода: горизонтальным и вертикальным. Используются иконки и css3-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
    Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
    Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs

    CSS3 Dropdown Menu

    

    Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
    http://codepen.io/ojbravo/pen/tIacg

    Simple Pure CSS Dropdown Menu

    

    Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
    http://codepen.io/Responsive/pen/raNrEW

    Bootstrap 3 mega-dropdown menu

    

    Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
    http://codepen.io/organizedchaos/full/rwlhd/

    Flat Navigation

    

    Стильная навигационная панель с плавным подменю. В старых браузерах отобразится с проблемами.
    http://codepen.io/andytran/pen/YPvQQN

    3D nested navigation

    

    Горизонтальное меню с очень крутой анимацией без js!
    http://codepen.io/devilishalchemist/pen/wBGVor

    Responsive Mega Menu - Navigation

    

    Горизонтальное адаптивное меню. Выглядит неплохо, но мобильная версия немного "хромает". Используется css, html и js.
    http://codepen.io/samiralley/pen/xvFdc

    Pure Css3 Menu

    

    Оригинальное меню. С простым и чистым кодом без js. Применяйте для "вау" эффектов.
    http://codepen.io/Sonick/pen/xJagi

    Full CSS3 Dropdown Menu

    

    Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
    http://codepen.io/daniesy/pen/pfxFi

    Css3 only dropdown menu

    

    Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
    http://codepen.io/riogrande/pen/ahBrb

    Dropdown Menus

    

    Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
    http://codepen.io/kkrueger/pen/qfoLa

    Pure CSS DropDown Menu

    

    Примитивное, но эффективное решение. Только css и html.
    http://codepen.io/andornagy/pen/xhiJH

    Pull Menu - Menu Interaction Concept

    

    Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.
    http://codepen.io/fbrz/pen/bNdMwZ

    Make Simple Dropdown Menu

    

    Чистый и простой код, без js. В ie8 точно работать будет.
    http://codepen.io/nyekrip/pen/pJoYgb

    Pure CSS dropdown

    

    Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
    http://codepen.io/jonathlee/pen/mJMzgR

    Dropdown Menu

    

    Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
    http://codepen.io/MeredithU/pen/GAinq

    CSS 3 Dropdown Menu

    

    Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
    http://codepen.io/ibeeback/pen/qdEZjR

    

    Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
    http://codepen.io/martinridgway/pen/KVdKQJ

    CSS3 Menu Dropdowns (особенное решение)!

    

    Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
    http://codepen.io/cmcg/pen/ofFiz

    П.С.
    Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
    Всем приятной работы.

    Задача

    Создать выпадающее меню инструментами CSS и HTML.

    Решение

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

    • Главная
    • Контакты
    • Услуги

    У нас получился список такого вида:

    Рисунок 1. Подготовительные работы.

    Обратите внимание: стиль ссылки меняется при наведении на неё курсора. Это реализовывается с помощью псевдокласса :hover . Этот псевдокласс задаёт стиль элемента при наведении на него курсора, при этом кнопка мыши не нажата. Если есть нажатие кнопки - это уже другой псевдокласс.

    Теперь перейдём к решению нашей задачи. Сделаем выпадающее меню для пункта "Услуги", добавим выпадающие разделы: "Купить", "Продать", "Обменять". Эти пункты - это отдельный список, который вложен в тег

  • Создадим этот список и добавим стили, описывающие его внешний вид.

    • Главная
    • Контакты
    • Услуги
      • Купить
      • Продать
      • Обменять

    Теперь у нас получился такой список:

    Рисунок 2. Подготовительные работы.

    Безусловно, это не то, что нам нужно. По умолчанию этот список должен быть скрыт и становиться видимым только при наведении мыши. Скрыть элемент можно при помощи правила правила {display : none }. А при наведении курсора его нужно активировать сделав снова видимым правила {display : inline-block }.

    • Главная
    • Контакты
    • Услуги
      • Купить
      • Продать
      • Обменять

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

    Чтобы элемент отображался не влияя на отображение других элементов, его нужно спозиционировать со значением absolute .

    • Главная
    • Контакты
    • Услуги
      • Купить
      • Продать
      • Обменять

    Что мы тут сделали:

    2. правило позиционирования {position : relative ;}. Это сделано для того, чтобы отчёт координат абсолютного позиционирования вложенного списка начался с верхнего левого угла этого блока, а не угла экрана.
    3. Добавили в родительский элемент
    4. правило {height : 20px ;}. Задали ему высоту, чтобы удобней было позиционировать выпадающий список.
    5. Установили абсолютное позиционирование {position : absolute ;} выпадающему списку и установили координаты: top и left .

    Теперь выпадающее меню работает корректно.

    Рисунок 3. Окончательный вариант.

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

    Учебная задача решена. Пока.