html导航栏横向展开,js实现横向伸展开的二级导航菜单代码

本文实例讲述了js实现横向伸展开的二级导航菜单代码。分享给大家供大家参考。具体如下：

这是一款js实现的横向伸展开二级导航菜单，鼠标放在一级菜单的第四个菜单项上，就能展开二级的菜单，菜单没有过多美化，只是一般的修饰，使用的朋友可根据您自己的网站风格重新美化菜单风格。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

横向伸展开来的二级导航菜单

.suckerdiv { }

.suckerdiv ul { width: 120px; position: relative; }

.suckerdiv ul li ul { left: 120px; /* Parent menu width - 1*/ position: absolute; width: 140px; /*sub menu width*/ top: 0; display: none; }

/*All subsequent sub menu levels offset */

.suckerdiv ul li ul li ul { left: 159px; /* Parent menu width - 1*/ }

/* menu links style */

.suckerdiv ul li a { display: bl