悬停时CSS菜单底层

Question

我有一个垂直位于div上方的大型菜单，其中包含图片横幅。当鼠标悬停在这个巨型菜单上时，它会扩展显示内容。展开内容时，图片横幅div中的图片会显示在内，使其不可见。当我将鼠标悬停在超级菜单链接上时，我希望它位于图片横幅div之上。

* {

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0; margin: 0;
}

body {



}

.wrapperss {
font-size: 1.6em;
padding: 2em;
margin: 0 auto;
width: 95%;
background-color: white;
z-index: 999;
}

/* Navigation Bar Styling */

.navSuper {
background: white;
width: 100%;
height: 43px;


position: relative;
border: 1px solid #B2BEB5;
}

.navSuper li {
list-style: none;
float: left;
text-align: center;
width: 33%; 


width: calc(100% / 3);
}

.navSuper > li > a {

color: #536267;
font-weight: bold;
font-size: .7em;
text-decoration: none;
line-height: 43px;
padding: 0 20px;
height: 43px;
text-transform: uppercase; 

}

.navSuper > li:hover {

border-right: 1px solid #b2beb5;
border-left: 1px solid #b2beb5;

}
.navSuper > li:hover > div {

display: block;
}

 .navSuper > li > div {
 position: absolute;
 left: 0;
 top: 41px;
 display: none;
 background-color: white;
 padding: 10px 10px;
 box-shadow: 2px 4px 4px rgba(0,0,0,0.4);
 overflow: hidden;
 }

 .nav-mainCustom{

 width: 100%;
 border: 1px solid #b2beb5;
 }

.nav-dividerCustom {
display: inline-block;
width: 1.8%;
}

.nav-focus-artCustom {
display: inline-block;
width: 11.5%;
vertical-align: top;
text-align: center;
}

.nav-art-authorCustom, .nav-art-titleCustom{

display: inline-block;
padding: 10px 0px;
}

.nav-art-authorCustom {
font-size: .9em;
color: red;
}

.nav-art-titleCustom {
font-size: 1.4em;
}
.nav-art-imageCustom {
display: inline-block;

}

.nav-divider-2Custom {
display:inline-block;
width: 3.8%;
}

.nav-headlinesCustom {
  display:inline-block;
  width: 34.5%;
  font-size: 1.2em;
  font-weight: bold;
  text-align: left;
  padding-right: 3px;

}
.nav-headline-linkCustom {

 border-bottom: 1px solid #b2beb5;
 padding: 10px 0px;
}

.nav-headline-linkCustom:last-child {
  border-width: 0px;
}

.nav-linksCustom{

  display: inline-block;
  width: 11.95%;
  vertical-align: top;
  text-align: left;
}

.nav-linkCustom{

  /*padding-bottom: 20px; */

}

.nav-empty-cellCustom{


}

.nav-headline-linkCustom:first-child{
  color: red;

}
.nav-linkCustom:first-child{
  color: red;
}

<div class="wrapperss">

<ul class="navSuper">

<li><a href="#">Title 1</a> 

<div class="nav-mainCustom">

<div class="nav-divider"></div>

<div class="nav-focus-artCustom">
  <img class="nav-art-imageCustom" src="http://example image" alt="article image"/>
  <span class="nav-art-authorCustom">Title 2</span> <br>
  <span class="nav-art-titleCustom">Product 1</span>
</div>

<div class="nav-divider-2Custom"></div>

<div class="nav-focus-artCustom">
  <img class="nav-art-imageCustom" src="http://exampleimage" alt="article image"/>
  <span class="nav-art-authorCustom">Title 3</span><br>
  <span class="nav-art-titleCustom">Product 2</span>
</div>

<div class="nav-divider-2Custom"></div>

<div class="nav-headlinesCustom">

  <div class="nav-headline-linkCustom">New Products</div>
  <div class="nav-headline-linkCustom">Product 1 Desctiption</div>
  <div class="nav-headline-linkCustom">Product 2 Desctiption</div>
  <div class="nav-headline-linkCustom">Product 3 Desctiption</div>
  <div class="nav-headline-linkCustom">Product 4 Desctiption</div>
  <div class="nav-headline-linkCustom">Product 5 Desctiption</div>

</div>

<div class="nav-divider-2Custom"></div>

<div class="nav-linksCustom">

  <div class="nav-linkCustom">Categories</div>
  <div class="nav-linkCustom">CAt 1</div>
  <div class="nav-linkCustom">Cat 2</div>
  <div class="nav-linkCustom">Cat 3</div>
  <div class="nav-linkCustom">Cat 4</div>

</div>

<div class="nav-linksCustom">

<div class="nav-empty-cellCustom"></div>
<div class="nav-linkCustom">Test 1</div>
  <div class="nav-linkCustom">Cat 5</div>
  <div class="nav-linkCustom">Cat 6</div>
  <div class="nav-linkCustom">Cat 7</div>
  <div class="nav-linkCustom">Cat 8</div>

</div>

Answer 1

In .navSuper class use

z-index: 99;