jQuery水平下拉菜单实现

<!DOCTYPE html>

<html>

<head>

<title>jQuery水平下拉菜单实现</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" charset="UTF-8" >

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="bootstrap/js/jquery-1.11.1.min.js"></script>

<!--[if lt IE 9]>

<script src="bootstrap/js/html5shiv.js"></script>

<script src="bootstrap/js/respond.min.js"></script>

<![endif]-->

<style type="text/CSS">

.menus{border:1px solid red; float:left; margin-left:4px; background:red;}

.menus a{display:block; width:100px; text-align:center;}

.menu{display:none;}

a{cursor:pointer;text-decoration:none;}

a:hover{background:white; text-decoration:none;}

a:visited{text-decoration:none; color:black;}

</style>

<script>

$(function(){

$(".menu-title").click(function(){

$(this).next().toggleClass();

});

});

</script>

</head>

<body>

<div class="menus">

<a class="menu-title">菜单项</a>

<div class="menu">

<a href="#" class="menu-item">菜单列表</a>

<a href="#" class="menu-item">菜单列表</a>

<a href="#" class="menu-item">菜单列表</a>

<a href="#" class="menu-item">菜单列表</a>

</div>

</div>

<div class="menus">

<a class="menu-title">菜单项</a>

<div class="menu">

<a href="#" class="menu-item">菜单列表</a>

<a href="#" class="menu-item">菜单列表</a>

<a href="#" class="menu-item">菜单列表</a>

<a href="#" class="menu-item">菜单列表</a>

</div>

</div>

<div class="menus">

<a class="menu-title">菜单项</a>

<div class="menu">

<a href="#" class="menu-item">菜单列表</a>

<a href="#" class="menu-item">菜单列表</a>

<a href="#" class="menu-item">菜单列表</a>

<a href="#" class="menu-item">菜单列表</a>

</div>

</div>

<div class="menus">

<a class="menu-title">菜单项</a>

<div class="menu">

<a href="#" class="menu-item">菜单列表</a>

<a href="#" class="menu-item">菜单列表</a>

<a href="#" class="menu-item">菜单列表</a>

<a href="#" class="menu-item">菜单列表</a>

</div>

</div>

</body>

</html>