我在一个网站上工作，页面顶部显示导航栏，下面显示数据表。然而，当我将鼠标悬停在导航栏上时，会导致子项下拉，我注意到与数据表重叠的部分看起来几乎是透明的。
我已经添加了我的网页的简化版本的代码，以及一些截图，以可视化我所面临的问题。是什么导致了这个问题，我该如何解决它？
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.13.4/fc-4.2.2/fh-3.3.2/r-2.4.1/datatables.min.css"/>
<style>
#container {
margin: 0 auto;
max-width: 1100px;
}
.toggle, [id^=drop] {
display: none;
}
nav {
margin: 0;
padding: 0;
background-color: #0177bf;
}
#logo {
display: block;
padding: 0 30px;
float: left;
font-size: 20px;
line-height: 60px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: left;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: #0177bf;
}
nav a {
display: block;
padding: 0 10px;
color: #FFF;
font-size: 15px;
line-height: 60px;
text-decoration: none;
}
nav ul li ul li:hover { background: #026dae; color: white; }
nav a:hover { background-color: #026dae; color: white; }
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
nav ul li:hover > ul { display: inherit; color: white; }
nav ul ul li {
float: none;
display: list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top: -60px;
left: 170px;
}
li > a:only-child:after { content: ''; }
/* Media Queries
--------------------------------------------- */
@media all and (max-width : 768px) {
#logo {
display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;
}
nav {
margin: 0;
}
.toggle + a,
.menu { display: none; position: absolute; }
.toggle {
display: block;
background-color: #0177bf;
padding: 0 10px;
color: #FFF;
font-size: 22px;
font-weight:bold;
line-height: 60px;
text-decoration: none;
border: none;
}
[id^=drop]:checked + ul { display: block; }
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a { padding: 0 40px; }
nav ul ul ul a { padding: 0 80px; }
nav ul ul {
float: none;
position: static;
color: #ffffff;
}
nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; color: white;}
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li { position: static; }
@media all and (max-width : 330px) {
nav ul li {
display: block;
width: 94%;
}
}
}
</style>
<!-- JavaScript -->
<script src="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.13.4/fc-4.2.2/fh-3.3.2/r-2.4.1/datatables.min.js"></script>
<script>
$(document).ready(function() {
$('#membersTable').DataTable({
responsive: true,
pageLength: 25
});
});
</script>
</head>
<body>
<nav>
<label for="drop" class="toggle">≡ Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li><a href="/dashboard">Dashboard</a></li>
<li>
<label for="drop-1" class="toggle">Ticket Management</label>
<a href="#">Ticket Management</a>
<input type="checkbox" id="drop-1"/>
<ul>
<li><a href="/members">Add New Tickets</a></li>
<li><a href="/member?action=new">Sell Tickets</a></li>
</ul>
</li>
<li>
<label for="drop-2" class="toggle">Event Management</label>
<a href="#">Event Management</a>
<input type="checkbox" id="drop-2"/>
<ul>
<li><a href="/events">Event Calendar</a></li>
<li><a href="/event?action=new">Add New Event</a></li>
<li><a href="/my-events">My Events</a></li>
</ul>
</li>
</ul>
</nav>
<div class="container">
<table id="membersTable" class="table table-striped table-bordered" style="width:100%">
<thead id="membersTableHeaders">
<tr>
<th data-priority="2"></th>
<th data-priority="1"></th>
<th data-priority="1"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th data-priority="2"></th>
<th data-priority="2"></th>
<th data-priority="2"></th>
<th data-priority="1"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
1条答案
按热度按时间zour9fqk1#
你的nav在HTML中声明在第一位，所以它在其他所有东西的下面。你需要设置
z-index为更高的值，但不能高于modals，然后你需要设置position为除static之外的任何值。