LaYouT _{no problem}

😎 » DARYA DLE » Готовые дизайны » Выпадающее меню на css при hover

Символы юникода Notepad++ Сокращение Типографика Начало css index.html Микроразметка style.css Блоки DLE Теги DLE

~~614~~ 0 3-04-2019, 01:14

Выпадающее меню на css при hover

Выпадающее меню, при hover, на чистом css без скриптов.

Такое же меню - но выпадающее при клике - смотреть

Очень простая и безобидная реализация выпадающей менюшки для сайта.

Смотреть Закрыть код

<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Пример выпадающего меню

При наведение курсора на кнопку - меню появляется с ефектом выпадания

‹ Попередня сторінка Наступна сторінка ›

Останні дописи:

_{Каталог сайтів на Blogspot}

Особливістю Blogspot є те, що дописи сайтів на цій платформі швидко і ефективно індексуються

_{Де знаходиться sitemap на}

Хто веде блог на технолігії blogspot.com з часом починає шукати як надати роботом свою мапу сайта?

_{Завантажити книги для}

Тут можна завантажити книги по PHP для тих хто хоче збільшити свій рівень професіоналізму у

Останні коментарі:

Я негр, негром быть слооооожно _{Негр 15 квітня 2024 21:02}

Дякую. Знадобилось. _{Микола 18 лютого 2023 21:39}

Залишайте в коментах свої методи боротьби з _{admin 15 травня 2022 03:05}

DLE
(Система управления сайтом)

Вся информация:	Смотреть
Особеность:	`Скорость, SEO, гибкость`
Разработчик:	Официальный сайт (Софтньюс Медиа Групп)

Версия:	Появилась:	Что нового?
1.0	2004	-
14.2	10.04.2021	Читать

SSI вставки Разработчики DLE Дизайны частей DLE DLE UniForm Отображение даты

Типи даних SQL Команди notepad++ .htaccess Команди GIT SSI вставки Кольори CSS E-mail заготовки Скорочений запис CSS3 Приклади flexbox Wayback Machine meta теги Зміна стилів по екрану Шрифтові іконки

"Верстка без проблем"

HTML - CSS - JS - PHP8 та SEO.

"RULLAN": Своє бачення ванільного коду та знання із СЕО, SMM, Google втілюю в проект "Ardills-CMS"
КОНТАКТИ

(P.S. - Сайт в процесі перекладу на державну мову)

Для усіх любителів Анекдотів українською існує чудовий сайт з безліччю приколів, смішних історій та відео:

Досвід у веброзробці:

2009

2010

2011

2012

2013

2014

2015

2016

2017

2018

2019

2020

2021

2022

2023

2024

2025

2026

2027

2028

2009

2023