0
我有一个巨大的菜单，它是垂直上方包含图像横幅的div。当将鼠标悬停在这个超大菜单上时，它将扩展显示内容。展开内容时，图像横幅div中的图像不可见。当我将鼠标悬停在超级菜单链接上时，我希望它位于图像横幅div的顶部。悬停在悬停的CSS菜单
* {
-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>
你的问题是有点混乱。请用实例说明。 – cosmoonot
您的HTML不完整。给我们一个重现问题的工作演示。看看如何创建一个[mcve] –
有很多代码，我将不得不合并以创建一个最小的完整示例，但总之，如果您有一个菜单（超级菜单），并且当它扩展其内容时，会在另一个div （与大型菜单无关）如何让大型菜单内容保持在最前？ – jumpman8947