css过度菜单,漂亮的纯CSS3水平导航菜单（有过渡动画效果）

我想你已经看过了各种带有效果的动画菜单(基于 jQuery 插件)，本文介绍如何仅使用 CSS3(没有任何 javascript)重复相同的行为，在菜单中使用 CSS3 过渡(为元素设置动画)。

漂亮的纯CSS3水平导航菜单(有过渡效果)

步骤 1. HTML

这是菜单的html代码。 这是基于 UL-LI 的导航菜单。

• Home
• Menu 1
  • Submenu 1
  • Submenu 2
  • Submenu 3
  • Submenu 4
  • Submenu 5
• Menu 2
  • Submenu 2-1
  • Submenu 2-2
  • Submenu 2-3
  • Submenu 2-4
  • Submenu 2-5
  • Submenu 2-6
  • Submenu 2-7
  • Submenu 2-8
• Menu 3
  • Submenu 3-1
  • Submenu 3-2
  • Submenu 3-3
  • Submenu 3-4
  • Submenu 3-5
• Menu 4
• Menu 5
• Menu 6
• Back

第 2 步。 CSS

这是菜单的 CSS 样式。#nav,#nav ul {

list-style