Question

我面临一个非常不寻常的问题。我设计了一个jsp表单，它使用数据表来列出mysql表中的记录。我使用网址来获取css和js -

该表单还使用另一个css作为导航菜单，当我尝试从此菜单导航时，它隐藏在数据表后面。有人可以帮我解决这个问题吗？如果还有其他要求，请告诉我。

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
    <title>Case Stage</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>

    <link href="css/styles.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">

</head>

<form action="" target="new">

    <body>
        <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>

    <style>
        div.dataTables_wrapper {
            width: 1300px;
            margin: 0 auto;
        }
    </style>
    <nav>

        <div class="wrapper">

            <ul id="menu" class="clearfix">

                <li><a href="#">Home</a>
                    <ul>
                        <li><a href="#">Dashboard</a></li>
                        <li><a href="#">Administration</a>
                            <ul>
                                <li><a href="ctsFrmUserManagement.jsp">Users</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Office</a></li>
                    </ul>    
                </li>
                <li><a href="#">Operations</a>
                    <ul>
                        <li><a href="#">Advocates</a></li>
                        <li><a href="#">Clients</a></li>
                        <li><a href="#">Courts</a></li>
                        <li><a href="#">Registrar</a></li>
                        <li><a href="#">Case</a></li>
                        <li><a href="UserController?action=listCaseStage">Case Stage</a></li>
                        <li><a href="#">Document Entry</a></li>
                    </ul>
                </li>
                <li><a href="#">Case</a>
                    <ul>
                        <li class="purple"><a href="#">Brief</a></li>
                        <li class="green"><a href="#">Case Updates</a></li>
                        <li class="purple"><a href="#">Notice Information</a></li>
                        <li class="green"><a href="#">Move Case</a></li>
                        <li class="aqua"><a href="#">Payments</a></li>                        

                    </ul>
                </li>
                <li><a href="#">Reports</a>
                    <ul>
                        <li><a href="#">Case</a></li>
                        <li><a href="#">Client</a></li>
                        <li><a href="#">Advocates</a></li>
                        <li><a href="#">Payments</a></li>
                        <li><a href="#">Users</a></li>
                    </ul>
                </li>
                <li><a href="#">Settings</a></li>
                <li><a href="#">        </a></li>
                <li><a href="#">        </a></li>
                <li><a href="#">        </a></li>
                <li><a href="#">        </a></li>
                <li><a href="#">        </a></li>
                <li><a href="#">        </a></li>
                <li><a href="#">        </a></li>
            </ul>
        </div>
    </nav>
    <script type="text/javascript">
        $(function () {
            $('a[href="#"]').on('click', function (e) {
                e.preventDefault();
            });

            $('#menu > li').on('mouseover', function (e) {
                $(this).find("ul:first").show();
                $(this).find('> a').addClass('active');
            }).on('mouseout', function (e) {
                $(this).find("ul:first").hide();
                $(this).find('> a').removeClass('active');
            });

            $('#menu li li').on('mouseover', function (e) {
                if ($(this).has('ul').length) {
                    $(this).parent().addClass('expanded');
                }
                $('ul:first', this).parent().find('> a').addClass('active');
                $('ul:first', this).show();
            }).on('mouseout', function (e) {
                $(this).parent().removeClass('expanded');
                $('ul:first', this).parent().find('> a').removeClass('active');
                $('ul:first', this).hide();
            });
        });
    </script>
</body>     
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>UserID</th>                   
            <th>UserName</th>
            <th>Password</th>   
            <th>FirstName</th>
            <th>LastName</th>
            <th>Gender</th>
            <th>Create Date</th>   
            <th>Create User</th>
            <th>Modify Date</th>
            <th>Modify User</th>                
            <th>Delete(Y/N)</th>
            <th>Active(Y/N)</th>
            <th>Delete CaseStage</th>
            <th>Edit CaseStage</th>
        </tr>
    </thead>
    <tbody>
        <c:forEach items="${users}" var="user">
            <tr>
                <td><c:out value="${user.cmu_ID}" /></td>                        
                <td><c:out value="${user.cmu_UserName}" /></td>
                <td><c:out value="${user.cmu_Password}" /></td>
                <td><c:out value="${user.cmu_FirstName}" /></td>
                <td><c:out value="${user.cmu_LastName}" /></td>
                <td><c:out value="${user.cmu_Gender}" /></td>                    
                <td><c:out value="${user.cmu_CreateDate}" /></td>                        
                <td><c:out value="${user.cmu_CreateUser}" /></td>
                <td><c:out value="${user.cmu_ModifyDate}" /></td>
                <td><c:out value="${user.cmu_ModifyUser}" /></td>
                <td><c:out value="${user.cmu_DeleteFlag}" /></td>
                <td><c:out value="${user.cmu_ActiveFlag}" /></td>
                <td><a href="UserController?action=edit&userID=<c:out value="${user.cmu_ID}"/>">Update</a></td>
                <td><a href="UserController?action=delete&userID=<c:out value="${user.cmu_ID}"/>">Delete</a></td>
            </tr>
        </c:forEach>
    </tbody>
</table>
<script>

    $(document).ready(function () {

        var table = $('#example').DataTable({
            "sScrollX": "500%",
            "sScrollXInner": "110%",
            "bScrollCollapse": true

        });


    });


</script>
<p><a href="UserController?action=insert">Register New User</a></p>

enter image description here

Answer 1

尝试：

.nav ul ul {
z-index:10000;
}

由于数据表，导航栏不可见

1 个答案: