Html css выпадающее меню: Как создать выпадающее меню

 <дел>
  
 
 
 Товары
   
  
 
 
гидрокостюм
 
 
пылесос
 
 
Коробочка для таблеток
 
 
Гольфы
 
 
Пиратская шляпа
 
 
Килт
 
 
  
 
  
 
 
    
 
 

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

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

Тег элемента списка верхнего уровня теперь закрыт, но внутри него сохраняется неупорядоченный список. Очень важно, чтобы вы использовали html-комментарии во время ручного кодирования, чтобы вы знали, где заканчивается каждый неупорядоченный список и начинается другой. Существует четкое свойство float html, включенное и прикрепленное после меню списка, которое будет содержать плавающие элементы и позволит возобновить нормальный поток документов. Затем выпадающее меню помещается в контейнер div с именем «navMenu».

2. Добавьте выпадающее горизонтальное меню CSS

Вот стили CSS, которые заставляют работать горизонтальное меню CSS:

  #navMenu {
    маржа: 0;
    ширина:авто;
 }
  #navMenu ул {
    маржа: 0;
    заполнение: 0;
    высота строки: 30 пикселей;
 }
  #navMenu li {
    маржа: 0;
    заполнение: 0;
    стиль списка: нет;
    плыть налево;
    должность: родственница;
    фон:#999;
 }
  #navMenu ul li a {
    выравнивание текста: по центру;
    высота: 30 пикселей;
    ширина: 150 пикселей;
    дисплей:блок;
    цвет:#000;
    семейство шрифтов: "Comic Sans MS", курсив;
    текстовое оформление: нет;
    цвет:#FFF;
    граница: 1px сплошная #FFF;
    тень текста: 1px 1px 1px #000;
 }
 /************************************************/
 /* скрыть меню и позволить ему вернуться */
 /************************************************/
        #navMenu ул ул {
        положение: абсолютное;
        видимость: скрытая;
        верх: 32px;
 }
  #navMenu ul li: hover ul {
    видимость: видимая;
    z-индекс: 9999;
 }
  /***************************************************/
  /*устанавливает цвет верхнего уровня при наведении*/
  #navMenu li:hover {
   фон:#09F;
 }
  /*задает цвет и фон элемента ссылки при наведении*/
  #navMenu ul li:hover ul li a:hover {
    цвет:#000;
    фон:#CCC;
 }
  /* Изменяет цвет текста при наведении для главного меню*/
  #navMenu a:наведите {
  цвет:#000;
 }
  
 /* Содержит число с плавающей запятой */
 . clearFloat {
    ясно: оба;
    маржа: 0;
    заполнение: 0;
 }
 /* Исправление отображения IE7 */
 #navMenu ul li {
  дисплей: встроенный;
 
 }
 

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

Выпадающее меню css для вложенных ссылок установлено в скрытое положение. Затем выпадающее меню css настраивается на повторное появление, когда посетитель наводит курсор на основную ссылку, и достигается с помощью псевдоселектора наведения.

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

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

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

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

Планы веб-хостинга, которые я использую

• Планы хостинга GoDaddy.com!
• Безлимитный хостинг на HostGator
• JustHost. com Неограниченное количество доменов
• Хостинг всего за 4,88 доллара в месяц! — паунет

Учебное пособие по контактной форме PHP Luxury

• Контактная форма и проверка формы
  14/06/2011 — Видеоурок — Часть 1
• Контактная форма и проверка формы — 2
  14/06/2011 — Видеоруководство — Часть 2

Корзина Great Premium

Маркетинг по электронной почте — рекомендуемые ссылки

• AWEBER — Маркетинг по электронной почте

Раскрывающееся меню CSS — Dreamweaver

• Раскрывающееся меню CSS — Dreamweaver
  05.13.2010 — Видеоруководство, часть 1
• Раскрывающееся меню CSS — Dreamweaver
  13/05/2010 — Видеоруководство, часть 2
• Учебное пособие по выпадающему меню CSS
  05.14.2010 — Учебное пособие по статье

Плавающее меню — Dreamweaver

• Боковая панель плавающего меню
  26/05/2010 — Dreamweaver Статья, учебное пособие
• Боковая панель плавающего меню — Dreamweaver
  23. 04.2010 — видеоруководство — Часть 1
• Боковая панель плавающего меню — Dreamweaver
  23.10.2010 — Видеоруководство — часть 2

Меню навигации с вкладками

• Меню навигации с вкладками CSS
  19/06/2010 — Учебное пособие по статье Dreamweaver
• Меню с вкладками CSS
  19/06/2010 — Видеоруководство по Dreamweaver

Текстовые поля CSS в Dreamweaver

• Учебное пособие по текстовым полям CSS
  31/05/2010 — Учебное пособие по статье Dreamweaver
• Текстовые поля Pure CSS — Dreamweaver
  29/04/2010 — Видеоурок, часть 1
• Текстовые поля на чистом CSS — Часть 2
  29/04/2010 — Видеоруководство, часть 2

CSS 3 в Dreamweaver

• CSS тень Текст
  29/05/2010 — Учебное пособие по статье Dreamweaver
• CSS3 Box Shadows
  23/05/2010 — Статья Учебник
• CSS3 Скругленные углы
  22/05/2010 — Учебник по статье
• CSS3 Shadow Text в Dreamweaver
  27/04/2010 — Видеоруководство
• Блочные тени CSS3 в Dreamweaver
  20/04/2010 — Видеоруководство
• Скругленные углы CSS3 Dreamweaver
  19/04/2010 — Видеоруководство

J Query в Dreamweaver

• Поворот изображений продукта и масштабирование
  10. 12.2010 — Видеоруководство — Часть 1
• Product Image Rotator and Zoomer
  10.12.2010 — Видеоруководство — Часть 2
• jQuery Image Rotator — слайдер S3, часть 1
  09.10.2010 — видеоурок — часть 1
• jQuery Image Rotator — слайдер S3, часть 2
  09.10.2010 — видеоурок — часть 2
• jQuery Infinite Carousel Video Tutorial
  30/08/2010 — Видеоурок — Часть 1
• jQuery Infinite Carousel Video Tutorial
  30/08/2010 — Видеоурок — Часть 2
• Учебное пособие по галерее изображений jQuery
  06.04.2010 — Учебное пособие по статье Dreamweaver
• jQuery Lightbox Html Tutorial
  06.03.2010 — Dreamweaver Статья Учебник
• Меню Lavalamp jQuery
  30/05/2010 — Руководство по статье Dreamweaver
• Галерея лайтбоксов jQuery — 1
  17/05/2010 — Видеоруководство, часть 1
• Галерея лайтбоксов jQuery — 2
  17/05/2010 — Видеоруководство, часть 2
• Галерея jQuery Lightbox — 3
  17/05/2010 — Видеоурок, часть 3
• Учебное пособие по подключаемому модулю jQuery Lightbox
  05. 13.2010 — Видеоурок, часть 1
• Плагин jQuery Lightbox
  05.13.2010 — Видеоурок, часть 2
• j Запрос меню лавовой лампы в CS4 1 из 2
  28/04/2010 — Видеоурок, часть 1
• Меню лавовой лампы jQuery в CS4 2 из 2
  28/04/2010 — Видеоурок, часть 2

Прозрачные накладки Dreamweaver

• Наложение прозрачного слоя 20/05/2010 — Учебник по статье
• Прозрачные наложения в Dreamweaver 31/03/2010 — Видеоурок, часть 1
• Прозрачные наложения в Dreamweaver 31/03/2010 — Видеоурок, часть 2

CSS в Adobe Dreamweaver

• Теги стилей в Dreamweaver CS4

Все типы ссылок в Dreamweaver

• Именованные привязочные ссылки Dreamweaver 10.14.2010
• Горячие точки карты изображений в Dreamweaver 10.14.2010
• Создание ссылок электронной почты в Dreamweaver 10.14.2010
• Ссылки и гиперссылки в Dreamweaver 14.