如何用html制作一个简单的导航栏,用jquery的方法制作一个简单的导航栏

学习导航栏的制作

$(document).ready(function() {

$(".div1").click(function() {

$(".div2").addClass("dlHover");

});

$(".div1").hover(function(){//第一个函数作为鼠标悬浮时执行的函数

$(this).addClass("bg");

},function(){//第二个函数作为鼠标离开时执行的函数

$(this).removeClass("bg");

$(".div2").removeClass("dlHover");

});

});

*{margin: 0px auto;padding: 0px;text-align: center;}

ul{list-style: none;}

.div2{display:none;width: 100px;border: 1px solid gray;background: #00FFFF;}

.dlHover{position:absolute;z-index: 9999;display: block;}

.div1{border: 1px solid gray;width: 100px;background-color: #999999;}

.bg{background-color: #1F9999;}

导航1

• 导航2
• 导航3

学习导航栏的制作

这是一个简单的导航栏