html弹出下拉菜单,jQuery点击弹出下拉菜单的小例子

导航——点击弹出内容

.navgation{margin:0;padding:0;list-style-type:none;position:relative;}

.navgation li {float:left;}

.navgation a{padding:3px 6px;background-color:orange;color:white;text-decoration:none;float:left;height:24px;}

.navgation a:hover {background-color:white;color:blue;text-decoration:underline;}

.navgation div{display:none;position:absolute;top:30px;}

$(document).ready(function () {

$(".navgation input").each(function () {

var this_div = $(".navgation div");

var _inx = $(".navgation input").index(this);

$(this).click(

function () { this_div.eq(_inx).slideToggle(); },

function () { this_div.eq(_inx).slideToggle(); }

);

});

});

• 这里放下拉内容1
• 这里放下拉内容2
• 这里放下拉内容3
• 这里放下拉内容4
• 这里放下拉内容5