プルダウンメニューを二段にしたい

Question

この画像のようにプルダウンメニューを二段にしたいのですがどうしたらいいですか?

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	$(function() {
		$('#menu li').hover(function() {
			$("ul:not(:animated)", this).slideDown();
		}, function() {
			$("ul.child", this).slideUp();
		});
	});
</script>
	<div id="bar">
		<ul id="menu">
			<li class="left"><a href="index.jsp" class="button">HOME</a></li>
			<li class="middle"><span class="button">アーティスト</span>
				<ul class="child">
					<%@ page import=" java.sql.*"%>
	<%
		Connection conn = null;
		String url = "jdbc:mysql://localhost:3306/body";
		String user = "root";
		String password = "19850617";
		try {
			Class.forName("com.mysql.jdbc.Driver").newInstance();
			conn = DriverManager.getConnection(url, user, password);
			Statement stmt;
			stmt = conn.createStatement();
			String sql = "SELECT group_id,group_name FROM groups";
			ResultSet rs;
			rs = stmt.executeQuery(sql);
			while (rs.next()) {
				out.println("<li class='child-middle'><a href='TOP.jsp?group=" +rs.getString("group_id")+ "'>"+rs.getString("group_name")+"</a></li>");
			}
		} catch (SQLException e) {
			// TODO 自動生成された catch ブロック
			e.printStackTrace();
		} catch (InstantiationException e){
			e.printStackTrace();
		}
			catch (IllegalAccessException e){
				e.printStackTrace();
		}
			catch	(ClassNotFoundException e) {
			// TODO 自動生成された catch ブロック
			e.printStackTrace();
		}
	%>

				</ul>
			</li>
			<li class="middle"><a href="room.jsp" class="button">チャット</a></li>
			<li class="middle"><a href="reporttop.jsp" class="button">レポート</a></li>
			<li class="right"><a href="questiontop.jsp" class="button">質問</a></li>
		</ul>
	</div>

Answer 1

そういうのはdivタグを使用して表示しているはずです。

私がやった時はdivタグ内であれこれメニューを作り、
ここかここを参考にプルダウンの位置を決定し、
このサイトにあるabsoluteを使用して実現しました。