下拉菜单 javascript-js+div+css下拉导航菜单完整代码分享

bendan520 2023年8月29日 javascript 0

js+div+css下拉导航菜单完整代码分享

更新时间：2016年12月28日 11:56:28 作者：计划

本文主要分享js+div+css下拉导航菜单的完整代码。 可以直接复制保存为HTML文件来体验疗效，一起来和小编一起看看吧

下拉菜单 javascript_菜单下拉键_菜单下拉自动匹配数据

效果预览：

下拉菜单 javascript_菜单下拉自动匹配数据_菜单下拉键

下拉式菜单

js+div+css下拉导航菜单完整代码：




css+div+js下拉菜单导航--柯乐义

*{margin:0;padding:0;list-style-type:none;}
body{padding:0;margin:0;font-size:12px;color:#fff;font-family:arial, helvetica, sans-serif;background:#fff;}
#nav{padding:0 5px;z-index:1;left:298px;width:600px;position:absolute;top:175px;height:30px;}
#nav li{float:left;text-align:center;}
#nav li a{float:left;width:100px;color:#336601;text-decoration:none;padding:3px 5px 0 5px;}
#nav li a:hover{float:left;width:88px;color:#fff;background:#539d26;text-decoration:none;padding:3px 3px 0 20px;}
.list{font-weight:normal;line-height:20px;text-align:left;padding:4px;}
.menu1{border:#9cdd75 1px solid;overflow-y:hidden;margin:6px 4px 0px 0px;width:120px;cursor:pointer;color:#336601;padding-top:6px;background:#f1fbec;moz-opacity:0.7;filter:alpha(opacity=70);opacity:0.7;}
.menu2{border:#eee8dd 1px solid;overflow-y:hidden;margin:6px 4px 0px 0px;width:120px;cursor:pointer;color:#999;padding-top:6px;height:18px;background:#f5f5f5;}

以上就是本文的全部内容。 希望本文的内容能够给您的学习或者工作带来一些帮助。 同时也希望大家能够支持脚本之家！