Javascript仿新浪游戏频道鼠标悬停显示子菜单效果

本文实例讲述了爪哇岛描述语言仿新浪游戏频道鼠标悬停显示子菜单效果，分享给大家供大家参考。具体如下：

这里演示使用射流研究…实现的网页栏目分类菜单，从新浪游戏频道扣下来的，操作方式类似于滑动门的效果，鼠标无需点击，只需把鼠标放在一级主菜单上，就可显示出二级分类菜单，这弹出的这个二级菜单中，实际上又重新进行了分类，可以说整体上，这是一款支持三级分类的网站菜单，目前新浪游戏还在用的效果哦。

先来看运行效果截图：

在线演示地址如下：

http://演示。JB 51。net/js/2015/js-games-鼠标悬停-显示-菜单-代码/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题js '仿新浪游戏频道导航条/title style type=' text/CSS ' * { margin :0；划水：0;}body{font:14px '微软雅黑，arial，serifcolor: # 333}a，a:link，a : visited { color : # 039 } img { border :0 }。header _ BG { width :100%；高度：128 px背景： URL(图片/标题。jpg)无重复中心顶部；}.表头{余量：0自动0自动宽度宽度：988像素高度：128 px背景：网址(图片/标题_ z . jpg)无重复中心顶部；}.nav { position : relative eleft :4 xtop :92 px宽度：950像素；高度：35px背景技术： # 333;边框-top:1px实心# 444;}.导航列表{列表样式-类型：无；边距-左侧：15像素；}.导航。列表li { float:left位置：相对；高度：35px线高：26 px}.导航。列出李game _ hover { float:left显示：块；页边距-顶部：5 px高度：30 pxpadd :0 10px 0 10pxcolor : # CCC font-weight : bold；文本装饰：无；}.导航。列出李游戏悬停当前.导航。列出李game _ hover : hover {底色： # fffcolor : # 575757 margin-top :4 px；padd :0 9px 0 9pxborder :1 px固体# 666;边框-底部：0;}.悬停_ cont { display:none位置：绝对；宽度：汽车；height : autotop :35 pxborder :1 px固体# 666;边框-top :0；边框-底部-宽度：2 px背景# fffz指数：1000;}.悬停_cont .nav _ cont { padding:15px填充-底部：0；}.悬停_cont .nav _ Li { display : inline-block；宽度：100%;高度：100%;* height:auto*边距-top :7 px；填充-b