Давайте возьмем еще один пример, который кто-то сказал сегодня: Pure CSS Dullpling Menu:
Диаграмма воспроизведения
Реализация этого очень проста, главным образом: использование перехода атрибутов и перехода.
Код:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> css </title> <style> *{margin: 0; Заполнение: 0; размер шрифта: 16px; Фондовая семья: «Microsoft Yahei»; } #container {width: 100px; Поле: 0 Авто; Текст-альбом: Центр; позиция: относительно; } #container ul {list-style: none; } #container span {display: inline-block; Ширина: 100px; Высота: 30px; высота линии: 30px; курсор: указатель; } #container ul {height: 0; Ширина: 100px; переполнение: скрыто; Переход: все 1s; позиция: абсолютно; Верх: 30px; слева: 0px; } #container: Hover ul {height: 330px; } #container ul li {founale: #eee; маржинальная версия: 3PX; курсор: указатель; Высота: 30px; высота линии: 30px; } </style></head><body> <div id="container"> <span>Mobile</span> <ul> <li>1 here</li> <li>2 here</li> <li>3 here</li> <li>4 here</li> <li>5 here</li> <li>6 here</li> <li>7 here</li> <li>8 here</li> <li>9 here</li> <li>10 Здесь </li> </ul> </div> </body> </html>Поскольку UL является масштабирующим объектом, он должен быть отделен от потока документов. Это не повлияет на макет, когда он практичен, просто дайте ему абсолютную позицию.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.