一、如图：

JQuery 实现菜单_修改密码


二、代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/script/bootstrap/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/script/bootstrap/css/bootstrap-responsive.css" />
<script src="${pageContext.request.contextPath}/script/jquery.js"></script>
<!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      <style type="text/css">
           ul li{list-style: none; text-align: center; }
           ul{padding: 0; margin: 0;}
           li{background-color:#999; width: 120px ; }
           a{text-decoration: none; display: block; display: inline-block;}
           a:link {color:#fff; padding-left: 20px;}     /* 未被访问的链接 */
           a:visited {color:#fff;}  /* 已被访问的链接 */
           a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
           a:active {color:#0000FF;}    /* 正在被点击的链接 */
           .main ul{display: none;} 
           .main,.hmain {background-color: #000; color: #fff ; border-bottom: 1px solid #333; }
           .main>a, .hmain>a {color: white; background-image: url(images/collapsed.gif);    background-repeat: no-repeat;   background-position: 3px center;}
           .hmain { float: left;    margin-right: 1px;}

      </style>

      <script type="text/javascript">
        $(function(){
            $(".main > a").click(function(){
                $(this).next("ul").slideToggle();
            });

            /* $(".hmain > a").click(function(){
                $(this).next("ul").slideToggle();
            }); */

            $(".hmain").hover(function(){
                $(this).children("ul").slideDown();
                changeIcon($(this).children("a"));
            },function(){
                $(this).children("ul").slideUp();
                changeIcon($(this).children("a"));
            });
        });

        function changeIcon(mainNode){
            if(mainNode){
                if(mainNode.css("background-image").indexOf("collapsed.gif")>=0){
                    mainNode.css("background-image","url('images/expanded.gif')");
                }else{
                    mainNode.css("background-image","url('images/collapsed.gif')");
                }
            }
        }
      </script>
</head>
    <body>
    <script src="${pageContext.request.contextPath}/script/bootstrap/js/bootstrap.js"></script>
        <div class="container">
            <h2>纵向菜单</h2>
            <div class="row">
            <ul >
                <li class="main">
                    <a href="#">系统管理</a>
                    <ul>
                        <li><a href="#">用户列表</a></li>
                        <li><a href="#">部门列表</a></li>
                        <li><a href="#">修改密码</a></li>
                    </ul>
                </li>
                <li class="main">
                    <a href="#">论坛管理</a>
                    <ul>
                        <li><a href="#">用户列表</a></li>
                        <li><a href="#">部门列表</a></li>
                        <li><a href="#">修改密码</a></li>
                    </ul>
                </li>
                <li class="main">
                    <a href="#">销售管理</a>
                    <ul>
                        <li><a href="#">客户列表</a></li>
                        <li><a href="#">部门列表</a></li>
                        <li><a href="#">修改密码</a></li>
                    </ul>
                </li>
            </ul>
            </div>

            <h2>模向菜单</h2>
            <div class="row">
            <ul >
                <li class="hmain">
                    <a href="#">系统管理</a>
                    <ul>
                        <li><a href="#">用户列表</a></li>
                        <li><a href="#">部门列表</a></li>
                        <li><a href="#">修改密码</a></li>
                    </ul>
                </li>
                <li class="hmain">
                    <a href="#">论坛管理</a>
                    <ul>
                        <li><a href="#">用户列表</a></li>
                        <li><a href="#">部门列表</a></li>
                        <li><a href="#">修改密码</a></li>
                    </ul>
                </li>
                <li class="hmain">
                    <a href="#">销售管理</a>
                    <ul>
                        <li><a href="#">客户列表</a></li>
                        <li><a href="#">部门列表</a></li>
                        <li><a href="#">修改密码</a></li>
                    </ul>
                </li>
            </ul>
            </div>
        </div>
    </body>
</html>