Как мне создать выпадающие меню CSS?

Каскадные таблицы стилей (CSS) - это имя, используемое для описания способа форматирования документа на языке гипертекстовой разметки (HTML) или на расширяемом языке разметки (XML). Его можно использовать для любого типа XML-документа, но чаще всего он используется с веб-страницами, написанными на HTML. CSS можно использовать для создания выпадающих меню на веб-страницах. В раскрывающихся меню CSS отображается один текстовый элемент, пока посетитель не использует мышь для наведения мыши на меню, после чего отображается весь список элементов. Меню создается с использованием идентификации CSS и тегов классов.

Выпадающие меню CSS начинаются с селектора идентификаторов. Этот селектор выглядит как #. За ним следует имя удостоверения личности. Вы можете назвать идентификатор как угодно, но он должен быть описательным, чтобы другие могли прочитать ваш код. Например, раскрывающееся меню может использовать код # drop1.

Создайте класс для первого элемента в раскрывающемся меню CSS с помощью селектора классов, который выглядит как точка. Класс будет частью элемента списка HTML. Элемент списка обозначается символами «li». Создайте класс верхнего уровня, набрав «li.top». Описание класса заключено в две фигурные скобки.

В следующем примере показан весь код CSS для первого элемента в списке:

# drop1 li.top {font-family: Verdana, Geneva, san-serif;
размер шрифта: 100%;
цвет: # FF00FF;}

Затем создайте класс для элементов, которые будут скрыты под первым элементом в меню CSS. Класс будет описывать неупорядоченный список HTML, который обозначается символами «ul.» Описание будет выглядеть практически так же, как и элемент меню верхнего уровня, с добавлением слов «display: none # 59» в начале описания. Это указывает на то, что элементы в неупорядоченном списке будут скрыты до тех пор, пока указатель не окажется над выпадающим меню CSS.

Ниже приведен пример этой части кода CSS:

# drop1 ul.link {
Дисплей: нет # 59
семейство шрифтов: Вердана, Женева, Сан-Сериф;
размер шрифта: 100%;
цвет: # FF00FF;}

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

Код для установки позиции:

# Drop1 {позицию: абсолютная;}

Это все, что нужно для CSS-части выпадающего меню. Остальная часть раскрывающегося меню CSS создается в документе HTML с использованием элементов «div», «id», «class», «li» и «ul». Тег "div" разделяет часть меню документа. Введите <div id = "drop1">, чтобы создать часть раскрывающегося меню. Затем запустите неупорядоченный список, используя HTML-элемент «ul».

Добавьте верхний класс к первому элементу списка и класс ссылок для остальных элементов. HTML-код должен выглядеть примерно так:

<div id = "drop1">
<li class = "top"> Верхний элемент </ li>
<li class = "link"> <a href="#"> Элемент </a> </ li>
<li class = "link"> <a href="#"> Элемент </a> </ li>
<li class = "link"> <a href="#"> Элемент </a> </ li>
</ ul> </ div>

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