Раскрывающийся текст html пример: Выпадающий список HTML: учимся создавать и задавать стили с помощью CSS

Содержание

Поле со списком | htmlbook.ru

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

<select атрибуты>
  <option атрибуты>Пункт 1</option>
  <option атрибуты>Пункт 2</option> 
</select>

Тег <select> выступает контейнером для пунктов списка и определяет его вид, будет ли это раскрывающийся список или же список с одним или множественным выбором. Вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка, ширина списка при этом определяется автоматически исходя из длины текста внутри <option>. Ниже представлен список множественного выбора, в котором пункты выделяются с помощью клавиши Ctrl и Shift и раскрывающийся список.

ЧебурашкаКрокодил ГенаШапоклякКрыса Лариса	ЧебурашкаКрокодил ГенаШапоклякКрыса Лариса
Список множественного выбора	Раскрывающийся список

Атрибуты тега <select>

Рассмотрим атрибуты тега <select>, с помощью которых можно изменять представление списка.

multiple

Наличие multiple сообщает браузеру отображать содержимое элемента <select> как список множественного выбора. Конечный вид списка зависит от используемого атрибута size. Если он отсутствует, то высота списка равна количеству пунктов, если значение size меньше числа пунктов, то появляется вертикальная полоса прокрутки.

ЧебурашкаКрокодил ГенаШапоклякКрыса Лариса	ЧебурашкаКрокодил ГенаШапоклякКрыса Лариса
Атрибут size отсутствует	Атрибут size равен 2

Для выбора нескольких значений списка применяются клавиши Ctrl и Shift совместно с курсором мыши.

В примере 1 показано создание списка множественного выбора.

Пример 1. Список множественного выбора

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><select name="select" size="3" multiple>
    <option selected value="s1">Чебурашка</option>
    <option value="s2">Крокодил Гена</option>
    <option value="s3">Шапокляк</option>
    <option value="s4">Крыса Лариса</option>
   </select>
   <input type="submit" value="Отправить"></p> 
  </form>
 </body>
</html>

name

Определяет уникальное имя элемента <select>. Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения серверным обработчиком.

size

Устанавливает высоту списка. Если значение size равно единице, то список превращается в раскрывающийся. Значение по умолчанию зависит от атрибута multiple. Если он присутствует, то размер списка равен числу элементов. Когда multiple нет, то значение атрибута size равно 1.

Атрибуты тега <OPTION>

Тег <option> также имеет атрибуты, влияющие на вид списка, они представлены далее.

selected

Делает текущий пункт списка выделенным. Если у тега <select> добавлен атрибут multiple, то можно выделять более одного пункта.

value

Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя/значение», где имя задаётся атрибутом name тега <select>, а значение — атрибутом value выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным.

label

Предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри <option>. Если атрибут label присутствует, то текст внутри тега <option> игнорируется и в списке выводится значение label. Браузер Firefox не поддерживает этот атрибут.

Создание списка показано в примере 2.

Пример 2. Использование списка

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><strong>Выбери персонажа</strong></p>
   <p><select name="hero">
    <option value="s1">Чебурашка</option>
    <option value="s2" selected>Крокодил Гена</option>
    <option value="s3">Шапокляк</option>
    <option value="s3" label="Лариса">Крыса Лариса</option>
   </select> 
   <input type="submit" value="Отправить"></p>
  </form> 
 </body>
</html>

Группирование элементов списка

При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется тег <optgroup>. Он представляет собой контейнер, внутри которого располагаются теги <option> объединённые в одну группу. Особенностью тега <optgroup> является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Для добавления заголовка группы используется атрибут label, как показано в примере 3.

Пример 3. Группирование элементов списка

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><select name="food">
    <optgroup label="Русская кухня">
     <option value="r1">Закуска Барская</option>
     <option value="r2">Раки, фаршированные по-царски</option>
     <option value="r3">Биточки в горшочке</option>
    </optgroup>
    <optgroup label="Украинская кухня">
     <option value="u1">Галушки славянские</option>
     <option value="u2">Пампушки украинские</option>
     <option value="u3">Жаркое по-харьковски</option>
    </optgroup>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Группированный список

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Тег <select> позволяет создать элемент интерфейса
в виде раскрывающегося списка, а также список с одним или множественным выбором,
как показано далее. Конечный вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка.
Ширина списка определяется самым широким текстом, указанным в теге <option>,
а также может изменяться с помощью стилей. Каждый пункт создается с помощью
тега <option>, который должен быть вложен в контейнер <select>. Если планируется отправлять данные
списка на сервер, то требуется поместить элемент <select> внутрь формы. Это также необходимо, когда к данным списка идет обращение через
скрипты.

ЧебурашкаКрокодил ГенаШапоклякКрыса Лариса	Выберите герояЧебурашкаКрокодил ГенаШапоклякКрыса Лариса
Список множественного выбора	Раскрывающийся список

Синтаксис

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

Атрибуты

accesskey: Позволяет перейти к списку с помощью некоторого сочетания клавиш.
autofocus: Устанавливает, что список получает фокус после загрузки страницы.
disabled: Блокирует доступ и изменение элемента.
form: Связывает список с формой.
multiple: Позволяет одновременно выбирать сразу несколько элементов
списка.
name: Имя элемента для отправки на сервер или обращения через скрипты.
required: Список обязателен для выбора перед отправкой формы.
size: Количество отображаемых строк списка.
tabindex: Определяет последовательность перехода между элементами при нажатии на клавишу Tab

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SELECT</title>
 </head>
 <body>  
 
  <form action="select1.php" method="post">
   <p><select size="3" multiple name="hero[]">
    <option disabled>Выберите героя</option>
    <option value="Чебурашка">Чебурашка</option>
    <option selected value="Крокодил Гена">Крокодил Гена</option>
    <option value="Шапокляк">Шапокляк</option>
    <option value="Крыса Лариса">Крыса Лариса</option>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>

Атрибут multiple | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Наличие атрибута multiple сообщает браузеру
отображать содержимое элемента <select> как список множественного
выбора. Конечный вид списка зависит от используемого атрибута size и браузера.
При size=»1″ Firefox устанавливает высоту списка равной одному пункту, Safari и Chrome игнорируют size, Opera превращает список в «крутилку».

Для выбора нескольких значений списка применяются клавиши Ctrl и Shift совместно с курсором мыши.

ЧебурашкаКрокодил ГенаШапоклякКрыса Лариса	ЧебурашкаКрокодил ГенаШапоклякКрыса Лариса
Атрибут size отсутствует	Атрибут size равен 1

Синтаксис

HTML	`<select multiple>...</select>`
XHTML	`<select multiple="multiple">...</select>`

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SELECT, атрибут multiple</title>
 </head>
 <body>

  <form action="handler.php">
    <p><select multiple size="1">
    <option>Чебурашка</option>
    <option>Крокодил Гена</option>
    <option>Шапокляк</option>
    <option>Крыса Лариса</option>
    </select></p>
  </form>

 </body>
</html>

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
4.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Тег <option> определяет отдельные пункты списка,
создаваемого с помощью контейнера <select>. Ширина
списка определяется самым широким текстом, указанным в теге <option>,
а также может изменяться с помощью стилей. Если планируется отправлять данные
списка на сервер, то требуется поместить элемент <select> внутрь формы. Это также необходимо, когда к данным списка идет обращение через
скрипты.

Синтаксис

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

Атрибуты

disabled: Заблокировать для доступа элемент списка.
label: Указание метки пункта списка.
selected: Заранее устанавливает определенный пункт списка выделенным.
value: Значение пункта списка, которое будет отправлено на сервер или прочитано
с помощью скриптов.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег OPTION</title>
 </head>
 <body> 

  <form action="option1.php">
   <p><select size="3" name="hero">
    <option disabled>Выберите героя</option>
    <option value="t1" selected>Чебурашка</option>
    <option value="t2">Крокодил Гена</option>
    <option value="t3">Шапокляк</option>
    <option value="t4">Крыса Лариса</option>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>

Раскрывающийся текст на HTML странице. Как?

Раскрывающийся текст на HTML странице Joomla. Как?

Код скрипта и вставляете его в html между тегами <body></body>

Для вставки кода в Joomla, необходимо зайти в настройки пользователя (под которым редактируется страница) и отключить редактор!

Плагин “Content — Spoiler Text” — скрытый текст в контенте, версия 1.0

Что это такое — возможность создать в контенте разворачиваемые блоки скрытого текста с эффектом анимации, при этом используется библиотека Jquery и плагин Accordeon от разработчика Jörn Zaefferer

Последовательность действий:
1 — установить плагин (и по желанию кнопку для редактора), опубликовать их (Content — Spoiler Button и Content — Spoiler text)
2 — в режиме редактирования материала вставить теги (либо нажать кнопку Spoiler)

Код:

здесь скрытый от посторонних глаз текст

3 — вписать нужный текст
4 — можно задавать произвольный текст заголовка скрытого блока (параметр title является обязательным!), допустимыми являются символы кириллицы, цифры 0-9 и символ подчеркивания _
5 — в параметрах плагина возможно указать необходимость подгрузки библиотеки Jquery (если уже используется на сайте) и скорость разворачивания скрытого блока (по умолчанию 200 мс)
6 — оформление заложено в файле plugins/content/pb_spoiler/style.css
7 — возможно использовать HTML форматирование внутри скрытого блока (теги, изображения, прочее)
8 — в параметрах плагина кнопки можно выставить значение заголовка по умолчанию

Где можно использовать:
1 — создание простейшего FAQ на сайте в пределах одной страницы
2 — просто скрытые блоки информации, не особо актуальной для пользователя
3 — да мало ли где еще

Тестировалось: Joomla 1.5.10, Mozilla, Opera, Safary (MS), GChrome. Под ИЕ-шками не смотрел

UPD — версия плагина 1.1 (pb_spoiler_plg_1.1.zip)
1 — добавлен функционал работы как от библиотеки Jquery, так и встроенного в движок mootools — опционально указывается в настройках плагина, по умолчанию mootools
2 — удалена опция указания скорости прокрутки, по умолчанию выставлено 400 мс для обоих скриптов
3 — исправлена ошибка подгрузки скриптов

Обновление — версия плагина 1.3 от scorpsan

Цитировать

там все сделано и в настройках есть куча параметров которыми можно заставить спойлеры открываться и закрываться как вам нужно….

HTML: Полезные примеры — dr.Brain

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

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

В этой статье мы рассмотрим несколько таких примеров.

Цветовая палитра

Инструмент выбора цвета (Color picker) для поля ввода можно создать без каких-либо усилий: достаточно добавить атрибут color для элемента input:

<label for="color-picker">Выберите цвет: </label>
<input type="color">

В примере, приведенном выше, тег label добавлен в соответствии с рекомендациями о доступности содержимого страниц веб-сайтов.

Автоматическое обновление страницы

Обновлять страницу сайта через определенные интервалы времени можно с помощью HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="refresh" content="10">
    </head>
    <body>
        <h2>Автоматичиеское обновление</h2>
        <p>Страница обновляется каждые 10 секунд</p>
    </body>
</html>

Время, спустя которое страница обновится, нужно указать в секундах для атрибута content тега meta http-equiv="refresh".

Демонстрация скрытого текста

Показывать и скрывать текст по нажатию на определенный элемент страницы можно без JavaScript.

Все, что Вам нужно: уметь пользоваться тегами details и summary:

<details>
  <summary>HTML</summary>
  <p>HTML - мощный и полезный язык разметки</p>
</details>

Раскрывающийся список для поля ввода

C помощью HTML можно создать поле ввода с выпадающим список и возможностью поиска вводимых данных по этому списку.

Для таких целей существует тег datalist:

<input list="cars">
<datalist>
    <option value="BMW">
    <option value="Mercedes">
    <option value="Ford">
    <option value="Lambo">
    <option value="Ferrari">
</datalist>

В соответствии с примером, приведенным выше, под тегом input нужно создать datalist, содержащий список элементов option.

Следует помнить, что id тега datalist и значение атрибута list поля ввода должны быть одинаковыми.

Спасибо за внимание.

Перевод статьи “4 Awesome Things You Can Do Using Only HTML”.

Как в html изменить цвет текста?

Здравствуйте, дороге друзья!

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

Навигация по статье:

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

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

Изменения цвета текста средствами HTML

К счастью в HTML есть специальный тег с атрибутом color, в котором можно указать нужный цвет текста.

<font color=»red»>Красный текст</font>

Значение цвета можно задавать несколькими способами:

При помощи кодового названия (Например: red, black, blue)
В шестнадцатиричном формате (Например: #000000, #ccc)
В формате rgba (Например: rgba(0,0,0,0.5))

Если вы ещё не знаете как определить значение цвета на сайте, то вам сюда

Таким образом вы можете изменить цвет у целого абзаца, слова или одной буквы, обернув то что вам нужно в тег <font>

Как изменить цвет текста в HTML с использованием CSS?

Для изменения цвета текста для определённого абзаца или слова можно присвоить ему класс, а затем в CSS файле задать для этого класса свойство color.

Выглядеть это будет так:

HTML

<p class=”color-text”>Пример текста</div>

CSS

.color-text {
color:#555555;
}

.color-text {

color:#555555;

}

Вместо color-text вы можете указать свой класс.

Если вам нужно изменить цвет текста для элемента на сайте у которого уже есть класс или идентификатор, то можно вычислить его название и указать в CSS.

Если вы не хотите лезть в CSS файл чтобы внести изменения, то можно дописать CSS стили прямо в HTML коде станицы, воспользовавшись тегом <style>.

Для этого:

1.Находи вверху HTML страницы тег </head>. Если ваш сайт работает на CMS, то этот фрагмент кода находится в одном из файлов шаблона. Например: header.php, head.php или что-то наподобие этого в зависимости от CMS.
2.Перед строкой </head> добавляем теги <style>…</style>.
3.Внутри этих тегов задаём те CSS свойства, которые нам нужны. В данном случае color:
<style>
.color-text {
color:#555555;
}
</style>
<style>
.color-text {
color:#555555;
}
</style>

Этот способ подходит если вам нужно изменить цвет сразу для нескольких элементов на сайте.

Если же такой элемент один, то можно задать или изменить цвет текста прямо в HTML коде.

Изменяем цвет в HTML коде при помощи атрибута style

Для этого добавляем к тегу для которого нам нужно изменить цвет текста атрибут style.

<p style=”color:red;”>Пример</p>

Здесь же при необходимости через ; вы можете задать и другие CSS свойства, например, размер шрифта, жирность и так далее.

<p style=”color:red; font-size:20px; font-weight:bolder;”>Пример</p>

Лично я обычно использую вариант с заданием стилей в CSS файле, но если вам нужно изменить цвет текста для какого то одного-двух элементов, то не обязательно присваивать им класс и потом открывать CSS файл и там дописывать слили. Проще это сделать прямо в HTML при помощи тега <font> или артибута style.

Так же вы должны знать, что есть такое понятие как приоритет стилей. Так вот когда вы задаёте цвет текста или другие стили в html при помощи атрибута style, то у этих стилей приоритет будет выше чем если вы их зададите в CSS файле (при условии что там не использовалось правило !important)

Чтобы изменить цвет текста отдельного слова, фразы или буквы мы можем обернуть их в тег span и задать ему нужный цвет.

Например:

<p>Пример <span style=”color:#2F73B6;”> текста</span></p>

В итог получится вот так:

Пример текста

Что делать если внесённые изменения не меняются?

Казалось бы, изменение цвета – одна из простейших операций при оформлении текста, ну что здесь может пойти не так?

Однако и здесь есть свои нюансы, которые нужно учитывать:

1.Приоритет стилей, о котором я писала выше. Если задавать цвет текста прямо в HTML то приоритет будет выше. Если вы задали его при помощи атрибута style, а он всё равно не изменилcя, то попробуйте добавить к нему правило !important;
<p style=”color:#fff!important;”>…</p>
<p style=”color:#fff!important;”>…</p>
2.Особенности тегов. Если вы зададите цвет текста для абзаца внутри которого есть ссылка, то он изменится для всего абзаца кроме ссылки. Чтобы изменился цвет ссылки нужно задавать его именно для тега ссылки.
Аналогично если вы зададите цвет текста для блока, внутри которого находится список, то для элементов этого списка он может не примениться и нужно будет отдельно задавать его именно для тегов списка.
3.Кеширование. Часто современные браузеры кешируют стили сайта и даже после внесения изменений в код они ещё какое то время отображают старую версию стилей. Для решения проблемы можно обновлять страницу при помощи сочетания клавиш CTRL+F5.
Так же у вас на сайте может стоять плагин для кеширования, из-за которого вы так же можете не видеть внесённых изменений на сайте.

Вот, в общем то и всё что касается изменения цвета в HTML. Как видите, ничего сложного! Если у вас возникнут какие то вопросы – пишите их в комментариях.

Успехов вам и вашим проектам!

С уважением Юлия Гусарь

HTML-тег выбора

Пример

Создайте раскрывающийся список с четырьмя вариантами:

Выбери машину:

<выбрать name = "cars">

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

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

Атрибут name необходим для ссылки
данные формы после отправки формы (если вы опустите name, данные из раскрывающегося списка отправляться не будут).

Атрибут id необходим для связывания
раскрывающийся список с меткой.

Теги

Атрибуты событий

Тег с тегами:

Выберите автомобиль:

Попробуй сам »

`связанные страницы`

Ссылка на HTML DOM: выберите объект

Учебное пособие по CSS: стилизация форм

`Настройки CSS по умолчанию`

Нет.

`Как создать раскрывающееся меню в HTML`

В HTML мы можем легко создать раскрывающееся меню в документе Html, используя следующие различные способы:

Использование HTML-формы
Использование внутреннего CSS

`Использование HTML-формы`

Если мы хотим создать раскрывающееся меню в документе Html с помощью формы, мы должны выполнить шаги, указанные ниже. Используя эти шаги, мы можем легко создать раскрывающееся меню:

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

<Голова> <Название> Создайте выпадающее меню с помощью HTML-формы <Тело> Эта страница поможет вам понять, как создать раскрывающееся меню в HTML-документе. И этот раздел поможет вам понять, как создать раскрывающееся меню с помощью формы Html.

Шаг 2: Теперь мы должны поместить курсор в ту точку тега тела документа Html, где мы хотим отобразить раскрывающееся меню.И затем мы должны ввести тег

 в этой точке.
 <Тело>
 Эта страница поможет вам понять, как создать раскрывающееся меню в документе Html.
 И этот раздел поможет вам понять, как создать раскрывающееся меню с помощью формы Html.
 <форма>
  Шаг 3:  Теперь мы должны определить теги  и 
  Шаг 4:  Теперь мы должны определить тег опции в соответствии с количеством значений, которые должны отображаться в раскрывающемся меню.
 <форма>
  Выбрать автомобили 
 <выбор>
  Шаг 5:  И, наконец, мы должны сохранить файл Html, а затем запустить файл.
 

 <Голова>
 <Название>
 Создайте выпадающее меню с помощью HTML-формы


 <Тело>
 Эта страница поможет вам понять, как создать раскрывающееся меню в HTML-документе.
 И этот раздел поможет вам понять, как создать раскрывающееся меню с помощью формы Html.
 <форма>
  Выбрать автомобили 
 <выбор>

Проверить это сейчас
 Вывод вышеуказанного HTML-кода показан на следующем снимке экрана:
 Использование внутреннего CSS 
 Если мы хотим создать раскрывающееся меню в документе Html с использованием таблицы стилей внутреннего каскадирования, мы должны выполнить шаги, указанные ниже.Используя эти шаги, мы можем легко создать раскрывающееся меню:
  Шаг 1:  Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим использовать внутренний CSS для создания раскрывающегося меню.
  Шаг 2:  Теперь мы должны поместить курсор сразу после закрытия тега title в теге заголовка   документа Html, а затем определить стили внутри тега 
  Шаг 3:  Затем мы должны использовать другой класс, который определяет раскрывающийся список.
 .падать {
 дисплей: встроенный блок;
 позиция: относительная
 }
  Шаг 4:  Теперь нам нужно создать еще один класс, который используется для описания того, как появляется раскрывающееся меню.Этот класс содержит различные атрибуты, которые показаны в следующем блоке.
 .dropdown-content {
 позиция: абсолютная;
 цвет фона: светло-серый;
 минимальная ширина: 200 пикселей;
 дисплей: нет;
 z-индекс: 1;
 }
  Шаг 5:  Теперь нам нужно добавить еще один класс для определения цвета и размера текста в раскрывающемся меню.
 .dropdown-content a {
 черный цвет;
 отступ: 12 пикселей 16 пикселей;
 текстовое оформление: нет;
 дисплей: блок;
 }
  Шаг 6:  И, наконец, в теге стиля мы должны отредактировать поведение раскрывающегося меню при наведении курсора.Итак, мы можем легко использовать следующий код в нашем теге стиля для редактирования.
 .dropdown-content a: hover {
 цвет фона: оранжевый;
 }
 .dropdown: hover .dropdown-content {
 дисплей: блок;
 }
 .dropdown: hover .dropbtn {
 цвет фона: серый;
 }
  Шаг 7:  Теперь нам нужно поместить курсор в тег тела, где мы хотим показать раскрывающееся меню. Затем мы должны вставить следующий код в тег body.
 
  Html 
  CSS 
  JavaScript 
  Шаг 8:  И, наконец, мы должны сохранить файл Html, а затем запустить файл в браузере.
 

 <Голова>
 <Название>
 Создайте раскрывающееся меню с помощью внутреннего CSS

 <стиль>
 .dropbtn {
 цвет фона: желтый;
 черный цвет;
 отступ: 10 пикселей;
 размер шрифта: 12 пикселей;
 }
 .падать {
 дисплей: встроенный блок;
 позиция: относительная
 }
 .dropdown-content {
 позиция: абсолютная;
 цвет фона: светло-серый;
 минимальная ширина: 200 пикселей;
 дисплей: нет;
 z-индекс: 1;
 }
 .dropdown-content a {
 черный цвет;
 отступ: 12 пикселей 16 пикселей;
 текстовое оформление: нет;
 дисплей: блок;
 }
 .dropdown-content a: hover {
 цвет фона: оранжевый;
 }
 .dropdown: hover .dropdown-content {
 дисплей: блок;
 }
 .dropdown: hover .dropbtn {
 цвет фона: серый;
 }
 

 <Тело>
 Эта страница поможет вам понять, как создать раскрывающееся меню в HTML-документе.
 И этот раздел поможет вам понять, как создать раскрывающееся меню с помощью внутреннего CSS.
 
  Html 
  CSS 
  JavaScript 

Проверить это сейчас
 Вывод вышеуказанного Html-кода показан на следующем снимке экрана:
: элемент HTML Option — HTML: язык разметки гипертекста 
 HTML-элемент    используется для определения элемента, содержащегося в   , и
   или
    элемент. Неявная роль ARIA  опция  Разрешенные роли ARIA Нет  роль  разрешена Интерфейс DOM  HTMLOptionElement 
 Этот элемент включает глобальные атрибуты.
   инвалиды  
 Если установлен этот логический атрибут, этот параметр нельзя проверить. Часто браузеры выделяют такой элемент управления серым цветом, и он не получает никаких событий просмотра, таких как щелчки мыши или связанные с фокусом. Если этот атрибут не установлен, элемент все равно может быть отключен, если один из его предков является отключенным элементом  .
   этикетка  
 Этот атрибут представляет собой текст для метки, указывающий значение параметра.Если атрибут  label  не определен, его значение равно текстовому содержимому элемента.
   выбран  
 Если присутствует, этот логический атрибут указывает, что опция изначально выбрана. Если элемент  является потомком элемента    может иметь выбранный   атрибут.
   значение  
 Содержимое этого атрибута представляет собой значение, которое будет отправлено с формой, если будет выбран этот параметр. Если этот атрибут опущен, значение берется из текстового содержимого элемента option.
 Таблицы BCD загружаются только в браузер
 Другие элементы, связанные с формой: 
 , 
 ,   ,