CSS Menu underlaping on hover

Question

I have a mega menu which is vertically above a div that contains image banners. When hovering over this mega menu it expands displaying content. When expanding the content goes under the images in the image banner div making them not visible. I want it to be on top of the image banner div when I hover over mega menu links.

 * { -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

在.navSuper类中使用

z-index: 99;