在一个两级菜单栏上使用html实现鼠标的一个例子

这篇文章介绍了使用html来实现鼠标过两级菜单栏的例子，与大家分享，下面：

第一效应图：

1，鼠标不在上面
2。将鼠标放在第一级菜单上，展开两级菜单。
三.鼠标放在两级菜单上。
代码uff1a

二级菜单测试
为了使菜单。
{体
100px垫上；
文本对齐：中心；
}
- CSS代码----------开始---------- * / / *菜单
{。menudiv
边境：2px固体# AAC；
溢出：隐藏；
显示：内联块；
}

*选项卡下划线。
menudiv {。
文字装饰：无；
}

设置UL和Li样式*
。menudiv UL，。MenuDiv Li {
列表样式：无；
保证金：0；
填充：0；
浮点数：左；
}

设置两个菜单绝对定位，并隐藏。
> > >里。menudiv UL UL {
位置：绝对；
显示：无；
}

样式/设置两个菜单李
> > >里。menudiv UL UL >里{
浮点数：无；
}

*显示菜单上的鼠标*
。menudiv > 李：悬停UL {
显示块；
}

菜单
> > >里。menudiv UL一{
宽度：120px；
行高：40px；
颜色：黑色；
背景颜色：# CFE；
文本对齐：中心；
左边界：1px solid # BBF；
显示块；
}

*在类菜单中，首先设置左边框。
。menudiv > 李：第一个孩子>一{
左边框：无；
}

在菜单中，将鼠标挂上。
> > >里。menudiv UL：悬停{
颜色：# f0f；
背景颜色：# BCF；
}

两个菜单
> > >里。menudiv UL UL >李>一{
宽度：120px；
行高：36px；
颜色：# 456；
背景颜色：# EFF；
文本对齐：中心；
边境：1px solid # CCC；
边界顶：无；
显示块；
}

*在两级菜单中，首先设置顶部边框。
> > >里。menudiv UL UL >里：第一个孩子>一{
边境上：1px solid # CCC；
}

*在两个级别的菜单，鼠标的风格。
> > >里。menudiv UL UL >李>：悬停{
颜色：# A4F；
背景颜色：# CDF；
}
- CSS代码----------端---------- * / / *菜单

菜单一

两级菜单
两级菜单
两级菜单
菜单两

两级菜单
两级菜单
菜单三

两级菜单
两级菜单
两级菜单
两级菜单
两级菜单
菜单四
菜单五

两级菜单
两级菜单
两级菜单
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。