首页汽车奥迪道奇手机小米华为联系我们
使用javascript实现起来较为麻烦,且这里结构和行为没有分开(虽然可以试用dom在JavaScript中创建使得结构和行为分开,但十分繁琐),不推荐。
3.用jQuery实现
jQuery是一种javascript库,我们可以在jQuery官网上下载最新版本的库文件,其中压缩的文件是用于产品的,为压缩的文件是便于开发人员学习和调试的。下载到本机以后,需要将库文件引用到html中,由于jQuery本质上也是JavaScript,所以引用方式为:
用jQuery实现二级下拉菜单的代码如下:
Document*{margin:0;padding: 0;list-style: none;text-decoration: none;} #nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;} ul{background: #aaa} ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;} ul li:hover{background: #cea;} ul li ul li{float: none;} ul li ul{position: absolute;top:40px;left: 0; display: none;} ul li ul li:hover{background: red;}