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