HTML下拉框代码

HTML下拉框代码

效果描述：当鼠标滑过一级导航的时候，对应的二级导航会展现出来，这就是我们经常说的下拉导航效果。

效果图如下：

详细代码如下：

Html部分：

• 网站首页

• 关于我们

  • 人才理念
  • 员工成长
  • 员工风采
  • 人才招聘

Css样式部分：

.navs{width:910px;height:48px;float:left;margin-left:15px}

.navs li{width:110px;height:48px;float:left;text-align:center;

line-height:48px;cursor:pointer;text-align:center}

.navs li ul{width:110px;height:180px;overflow:hidden;display:none}

.navs li ul li{width:110px;height:40px;background:green;margin-top:1px; line-height:40px}

.navs li.on{background:green;color:#FFF}

.navs li ul li.in{background:#000}

Javascript部分：

以上是实现这个下拉框效果的代码，图中的图片、文字等可以根据自己的实际情况做相应的调整。