我的导航栏项目需要一些帮助，我有一个应该在鼠标悬停时展开的购物车。哪个有效，但扩展出现在其他菜单项后面，我无法弄清楚原因。我已经尝试将z-index置于荒谬的值并使位置绝对。仍然没有成功。
这是Nav html：
<nav class="navbar navbar-inverse">
<div class="container">
<div class="container" style="background-color: #2a3968; margin-bottom:10px;">
<ul class="collapse navbar-collapse nav navbar-nav navbar-right" style="margin-top:-10px;">
<li style = "color:white;">
<?php
if($this->request->session()->read('Auth')) {
// user is logged in, show "account" link
echo $this->Html->link(__('Account'), ['controller' => 'Users', 'action' => 'Index']);
}
?>
</li>
<span style="color:white; margin-top:-15px;">
<li style = "color:white; margin-right:15px;">
<?php
if($this->request->session()->read('Auth')) {
// user is logged in, show logout..user menu etc
echo $this->Html->link(__('Logout'), ['controller' => 'Users', 'action' => 'logout']);
} else {
// the user is not logged in
echo '<span style="color:white">'.$this->Html->link(__('Login/Register'), ['controller' => 'Users', 'action' => 'login']).'</span>';
}
?>
</li>
</span>
</ul>
</div>
<div class="navbar-header" style="margin-top:-25px; margin-bottom:-15px;">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container">
<div class="col-sm-6">
<a href="http://localhost/team12/pages/home">
<img src="http://ie.infotech.monash.edu/Team12/Build4/GIT/webroot/img/silverdeals.png" class= "logo" style=" padding-bottom:10px; height:70px; float:left;">
</a>
</div>
<div class="col-sm-6" style="vertical-align:center; color:white; padding-top:10px; padding-right:-15px;">
<ul>
<li style="display: inline-block; float:right;">
<?php
echo $this->element('quick_cart');
?>
</li>
<li style="display: inline-block; float:right;"> | </li>
<li style="display: inline-block; float:right; "> Secure Shipping anytime </li>
<li style="display: inline-block; float:right; "> | </li>
<li style="display: inline-block; float:right; "> <?php echo $this->element('search');?> </li>
</ul>
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><?= $this->Html->link(__('Home'), ['controller' => 'Pages', 'action' => 'home']) ?></li>
<li><?= $this->Html->link(__('Products'), ['controller' => 'Products', 'action' => 'Index']) ?></li>
<li><?= $this->Html->link(__('New Arrivals'), ['controller' => 'Products', 'action' => 'newarrivals']) ?></li>
<li><?= $this->Html->link(__('Rings'), ['controller' => 'Products', 'action' => 'rings']) ?></li>
<li><?= $this->Html->link(__('Bracelets'), ['controller' => 'Products', 'action' => 'bracelets']) ?></li>
<li><?= $this->Html->link(__('Earrings'), ['controller' => 'Products', 'action' => 'earrings']) ?></li>
<li><?= $this->Html->link(__('Necklaces'), ['controller' => 'Products', 'action' => 'necklaces']) ?></li>
<li><?= $this->Html->link(__('Sales'), ['controller' => 'Products', 'action' => 'sales']) ?></li>
<li><?= $this->Html->link(__('Contact Us'), ['controller' => 'Pages', 'action' => 'About']) ?></li>
</ul>
</div>
</nav>
以下是购物车代码：
<style>
.hide{display:none}
.quickcart {
position: absolute;
z-index: 99999;
width: 300px;
border: 10px solid #bebebe;
background-color: white;
padding: 8px 10px 10px;
color: #000000;
right:1%;
}
#show-quick-cart {
cursor:auto;
float:none;
color: #000000;
z-index:2000;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:120%;
text-decoration: none;
line-height: 5px;
text-align: center;
display: inline-block;
vertical-align: middle;
box-sizing:inherit;
}
.nav{
z-index: 100;
}
</style>
<div id="pardiv" style=" color:white;">
<?php
$counter = $this->request->session()->read('Cart.count');
echo $this->Html->link('<span style="color:white;" class="glyphicon glyphicon-shopping-cart"></span><span style="color:white; "></span><span class="badge" id="cart-counter"><?php echo $counter ;?></span>', array('controller'=>'Pages','action'=>'display','shoppingCart'), array('escape'=>false, 'id'=>'show-quick-cart'));
?>
<div id="show-quick-cart-zone">
<div id="quickcart" class="quickcart hide">
<div class="quickcarttitle"><span><b>Your cart</b></span></div>
<div class="quickcart-products">
<?php if ($this->request->session()->check('Cart.items')){
?>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<?php
$products = $this->request->session()->read('Cart.items');
$cartTotal = 0;
foreach ($products as $product):
?>
<tbody>
<tr>
<td><img src="<?= h($product['PicURL']) ?>" alt="BlueMountain"></td>
<td><?php echo $product['Quantity'];?></td>
<?php if(isset($product['SalePrice'])){
$cartTotal += $product['SalePrice']*$product['Quantity'];
?>
<td><?php echo $product['SalePrice']*$product['Quantity'];?></td>
<?php
}
else {
$cartTotal += $product['UnitPrice']*$product['Quantity'];
?>
<td><?php echo $product['UnitPrice']*$product['Quantity']; ?></td>
<?php
}
?>
<td><?= $this->Form->postLink(__('x'), ['controller'=>'products', 'action' => 'removeFromCart', $product['ProductID']], ['confirm' => __('Are you sure you want to remove {0} from the cart?', $product['ProductName'])]) ?></td>
</tr>
<?php endforeach; ?>
<tr>
<td></td>
<td><b>Total:</b></td>
<td><?php echo $cartTotal; ?> </td>
<td></td>
</tr>
</tbody>
</table>
</div>
<?php
} else {
?>
<p><b> is empty!</b></p>
<?php
}
?>
</div>
</div>
</div>
</div>
<script>
var flag=0;
$('#show-quick-cart').mouseenter(function () {
$('#quickcart').slideDown(500);
return false;
});
$('#pardiv').mouseleave(function () {
$('#quickcart').slideUp(500);
return false;
});
</script>
非常感谢任何帮助，非常感谢你们。