Как сделать выпадающее меню?

Красивое выпадающее меню можно создать не только в JavaScript, но и используя стандартные теги HTML. Такой способ создания выпадающего меню будет полезен тем, кто только начинает свои первые шаги в создании сайтов и хочет упростить работу по созданию меню на страницах.
Создать сайт самостоятельно с Wix.com

Инструкция

В коде HTML такое меню является ненумерованным списком с вложенными списками внутри. Для начала создайте файл style.css и скопируйте туда следующий CSS-код, необходимый для оформления и форматирования меню:

#nav, #nav ul { list-style: none; margin: 0; padding: 0; border: 1px solid #000; background: #515151; float: left; width: 100%;}#nav li { float: left; position: relative; background-color: #003366; back\ground: none;}#nav li ul { display: none; position: absolute; background-color: #003366; padding: 8px 0; width: 138px;}

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

Для всех этих изменений добавьте в файл следующий код:

#nav a { color: #fff; text-decoration: none; display: block; width: 120px; padding: 4px 10px; background-color: #003366 repeat-y right;}#nav a:hover { color: #000; background-color: #0033FF;}#nav li:hover { background-color: #333333;}

Затем добавьте следующий кусок кода для окончательной доработки меню:

#nav li:hover li ul { display: none; width: 138px; top: -9px; left: 133px;}#nav li:hover li:hover ul { display: block;}

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

• Домой
• Каталог
  • Вся продукция
    • По дате
    • Производители
    • Другое
...

Оцените статью!