Bootstrap 下拉菜单:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css"> </head> <body style="margin:50px 0"> <div class="container"> <div class="dropdown open clearfix"> <ul class="dropdown-menu"> <li class="dropdown-header">title</li> <li class="active"><a href="">01</a> </li> <li><a href="">02</a> </li> <li><a href="">03</a> </li> <li><a href="">04</a> </li> <li class="divider"></li> <li class="dropdown-header">title</li> <li class="disabled"><a href="">01</a> </li> <li><a href="">02</a> </li> <li><a href="">03</a> </li> <li><a href="">04</a> </li> </ul> </div> </div> </body> </html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html> <html> <head> <base href="<%=basePath%>"> <meta charset="UTF-8"> <title>b index</title> <link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'> </head> <body style="margin:150px;"> <div class="bg-primary">组合式下拉菜单</div> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> success <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a>01</a></li> <li><a>02</a></li> <li><a>03</a></li> <li class="divider"></li> <li><a>04</a></li> </ul> </div> <div class="bg-primary">组合式上拉菜单</div> <div class="btn-group dropup"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> success <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a>01</a></li> <li><a>02</a></li> <li><a>03</a></li> <li class="divider"></li> <li><a>04</a></li> </ul> </div> <div class="bg-primary">分离式下拉菜单</div> <div class="btn-group"> <button type="button" class="btn btn-success">success</button> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a>01</a></li> <li><a>02</a></li> <li><a>03</a></li> <li class="divider"></li> <li><a>04</a></li> </ul> </div> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="b/js/bootstrap.js"></script> </body> </html>