-
index.html
复制代码代码如下所示：
回家
菜单1
子菜单一
子菜单B
子菜单C
子菜单D
子菜单E
子F
子G
子H
菜单2
子菜单一
子菜单B
子菜单C
子菜单D
子菜单E
子F
子G
子H
菜单3
子菜单一
子菜单B
子菜单C
子菜单D
子菜单E
子F
子G
子H
菜单4
菜单5
2。CSS
复制代码代码如下所示：
菜单，菜单，UL
列表样式：无；
填充：0；
保证金：0；
}
{。菜单
身高：58px；
}
菜单李{
背景：-moz线性梯度（# 292929，# 252525）；
背景：MS线性梯度（# 292929，# 252525）；
背景：-webkit-gradient（线性，左上，左下，色站（0%，292929，#）颜色停止（100%，# 252525））；
背景：WebKit的线性梯度（# 292929，# 252525）；
背景：- o-linear-gradient（# 292929，# 252525）；
过滤器：ProgID：DXImageTransform.Microsoft.gradient（startcolorstr =292929#，endcolorstr =252525#）；
MS过滤器：ProgID：DXImageTransform.Microsoft.gradient（startcolorstr =292929#，endcolorstr =# 252525'）；
背景：线性梯度（# 292929，# 252525）；
底部边框：2px固体# 181818；
边境上：2px固体# 303030；
最小宽度：160px；
}
菜单>李{
显示块；
浮点数：左；
职位：相对；
}
菜单> >：第一个子{
5px边界半径：00；
}
菜单{
左边界：3px固体RGBA（0, 0, 0，0）；
颜色：# 808080；
显示块；
字体家庭：'lucida控制台；
字体大小：18px；
行高：54px；
填充物：0 25px；
文字装饰：无；
文本转换：大写；
}
悬停代码段：
复制代码代码如下所示：
菜单{李：悬停
背景颜色：# 1c1c1c；
背景：-moz线性梯度（# 1c1c1c，# 1b1b1b）；
背景：MS线性梯度（# 1c1c1c，# 1b1b1b）；
背景：-webkit-gradient（线性，左上，左下，色站（0%，# 1c1c1c），色站（100%，# 1b1b1b））；
背景：WebKit的线性梯度（# 1c1c1c，# 1b1b1b）；
背景：- o-linear-gradient（# 1c1c1c，# 1b1b1b）；
过滤器：ProgID：DXImageTransform.Microsoft.gradient（startcolorstr =# 1c1c1c '，endcolorstr =# 1b1b1b）；
MS过滤器：ProgID：DXImageTransform.Microsoft.gradient（startcolorstr =# 1c1c1c '，endcolorstr =# 1b1b1b '）；
背景：线性梯度（# 1c1c1c，# 1b1b1b）；
底部边框：2px固体# 222222；
边境上：2px固体# 1b1b1b；
}
菜单：
5px边界半径：000；
左边界：3px固体# c4302b；
颜色：# c4302b；
}
CSS
复制代码代码如下所示：
菜单风格 / * * /
{。
左：0；
马克斯身高：0；
位置：绝对；
顶部：100%；
Z指数：0；
WebKit的视角：400px；
400px -moz视角；
MS的视角：400px；
- o-perspective：400px；
观点：400px；
}
{子李。
不透明性：0；
WebKit的变换：rotatey（90度）；
-moz变换：rotatey（90度）；
MS变换：rotatey（90度）；
- o-transform：rotatey（90度）；
变换：rotatey（90度）；
WebKit的过渡：opacity.4s，-webkit-transform.5s；
过渡：opacity.4s -moz，-moz-transform.5s；
MS：opacity.4s过渡，-ms-transform.5s；
- O转换：opacity.4s，-o-transform.5s；
过渡：opacity.4s，transform.5s；
}
李：{ menu.submenu悬停。
左边界：3px固体# 454545；
边框半径：0；
颜色：# ffffff；
}
。菜单>李：悬停菜单，菜单>李：focus.submenu {。
马克斯身高：2000px；
Z指数：10；
}
。菜单>李：hover.Submenu Li，李：focus.Submenu Li {菜单>。
不透明性：1；
WebKit的变换：没有；
-moz变换：没有；
- MS转换：无；
- o-transform：无；
转换：无；
}
CSS
复制代码代码如下所示：
CSS3延迟过渡效果* / / *
李：hover.submenu。菜单里：nth-child（1）{
WebKit的过渡延迟：0s；
-moz过渡延迟：0s；
MS：0s过渡延迟；
- o-transition-delay：0s；
过渡延迟：0s；
}
李：hover.submenu。菜单里：nth-child（2）{
WebKit的过渡延迟：50ms；
-moz过渡延迟：50ms；
MS：50ms过渡延迟；
- o-transition-delay：50ms；
过渡延迟：50ms；
}
李：hover.submenu。菜单里：nth-child（3）{
WebKit的过渡延迟：100ms；
-moz过渡延迟：100ms；
MS：100ms过渡延迟；
- o-transition-delay：100ms；
过渡延迟：100ms；
}
李：hover.submenu。菜单里：nth-child（4）{
WebKit的过渡延迟：150ms；
-moz过渡延迟：150ms；
MS：150ms过渡延迟；
- o-transition-delay：150ms；
过渡延迟：150ms；
}
李：hover.submenu。菜单里：nth-child（5）{
WebKit的过渡延迟：200ms；
-moz过渡延迟：200ms；
MS：200ms过渡延迟；
- o-transition-delay：200ms；
过渡延迟：200ms；
}
李：hover.submenu。菜单里：nth-child（6）{
WebKit的过渡延迟：250ms；
-moz过渡延迟：250ms；
MS：250ms过渡延迟；
250ms - o-transition-delay；
过渡延迟：250ms；
}
李：hover.submenu。菜单里：nth-child（7）{
WebKit的过渡延迟：300ms；
-moz过渡延迟：300ms；
MS：300ms过渡延迟；
- o-transition-delay：300ms；
过渡延迟：300ms；
}
李：hover.submenu。菜单里：nth-child（8）{
WebKit的过渡延迟：350ms；
-moz过渡延迟：350ms；
MS：350ms过渡延迟；
- o-transition-delay：350ms；
过渡延迟：350ms；
}
。子李：nth-child（1）{
WebKit的过渡延迟：350ms；
-moz过渡延迟：350ms；
MS：350ms过渡延迟；
- o-transition-delay：350ms；
过渡延迟：350ms；
}
。子李：nth-child（2）{
WebKit的过渡延迟：300ms；
-moz过渡延迟：300ms；
MS：300ms过渡延迟；
- o-transition-delay：300ms；
过渡延迟：300ms；
}
。子李：nth-child（3）{
WebKit的过渡延迟：250ms；
-moz过渡延迟：250ms；
MS：250ms过渡延迟；
- o-transition-delay：250ms；
过渡延迟：250ms；
}
。子李：nth-child（4）{
WebKit的过渡延迟：200ms；
-moz过渡延迟：200ms；
MS：200ms过渡延迟；
- o-transition-delay：200ms；
过渡延迟：200ms；
}
。子李：nth-child（5）{
WebKit的过渡延迟：150ms；
-moz过渡延迟：150ms；
MS：150ms过渡延迟；
- o-transition-delay：150ms；
过渡延迟：150ms；
}
。子李：nth-child（6）{
WebKit的过渡延迟：100ms；
-moz过渡延迟：100ms；
MS：100ms过渡延迟；
- o-transition-delay：100ms；
过渡延迟：100ms；
}
。子李：nth-child（7）{
WebKit的过渡延迟：50ms；
-moz过渡延迟：50ms；
MS：50ms过渡延迟；
- o-transition-delay：50ms；
过渡延迟：50ms；
}
。子李：nth-child（8）{
WebKit的过渡延迟：0s；
-moz过渡延迟：0s；
MS：0s过渡延迟；
- o-transition-delay：0s；
过渡延迟：0s；
}
以上是本文的全部内容，希望大家能喜欢。