2016-11-27 69 views
0

我有一個div的網頁,這個div包含一個圖像。我也有一個菜單欄,它在盤旋時展開。圖像應該位於菜單欄下方,並且在擴展菜單位於「上方」時不可見。但是,它並沒有這樣做:圖像清晰地位於菜單的頂部。我怎麼能解決這個問題,讓圖像消失?我在CSS中做錯了什麼?如何讓圖像的div消失在菜單項後面?

body { 
 
    padding-right: 0; 
 
    margin-right: 0; 
 
    padding-left: 0; 
 
    margin-left: 0; 
 
    margin-top: 0; 
 
} 
 
.nav { 
 
    background-color: #F6F8FB; 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 80px; 
 
    /*overflow: hidden;*/ 
 
} 
 
.nav li { 
 
    float: left; 
 
    padding: 1%; 
 
    font-family: AlegreyaSansSC-Light; 
 
    font-size: 14px; 
 
    color: #637F92; 
 
    letter-spacing: 0.52px; 
 
    height: 100%; 
 
    width: 126px; 
 
    margin-top: 0; 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
    margin-bottom: 0; 
 
} 
 
.nav li:hover { 
 
    /*background-color: #0B619B;*/ 
 
    /*opacity: 0.1;*/ 
 
    /*color: #637F92;*/ 
 
    background: rgb(221, 232, 241); 
 
    /* Fallback for older browsers without RGBA-support */ 
 
    background: rgba(221, 232, 241, 0.95); 
 
} 
 
.nav ul { 
 
    list-style: none; 
 
    /*removes bullet points*/ 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #F6F8FB; 
 
    min-width: 70px; 
 
    /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/ 
 
    padding: 70px 126px; 
 
    opacity: 1; 
 
} 
 
.dropdown-content:hover { 
 
    background: rgb(221, 232, 241); 
 
    /* Fallback for older browsers without RGBA-support */ 
 
    background: rgba(221, 232, 241, 0.95); 
 
} 
 
.nav li:hover .dropdown-content { 
 
    display: block; 
 
} 
 
.logo-bar { 
 
    background-color: white; 
 
    height: 180px; 
 
    width: 100%; 
 
} 
 
.logo { 
 
    height: 63px; 
 
    width: 56px; 
 
    position: relative; 
 
    top: 25%; 
 
    left: 15%; 
 
    /*border: 3px solid #73AD21;*/ 
 
}
<div class="nav"> 
 
    <ul> 
 
    <li>Wilkommen</li> 
 
    <li>Angebot 
 
     <ul class="dropdown-content"> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     </ul> 
 
    </li> 
 
    <li>Unternehmen 
 
     <ul class="dropdown-content"> 
 
     <li>Hallo</li> 
 
     <li>Hallo2</li> 
 
     </ul> 
 
    </li> 
 
    <li>Anfahrt</li> 
 
    <li>Kontakt</li> 
 
    </ul> 
 
</div> 
 

 
<!-- LOGO BAR --> 
 
<div class="logo-bar"> 
 
    <div class="logo"> 
 
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 63 56" style="enable-background:new 0 0 63 56;" xml:space="preserve"> 
 
     <style type="text/css"> 
 
     .st0 { 
 
      fill: #0D629C; 
 
      stroke: #FFFFFF; 
 
      stroke-width: 0.3177; 
 
      stroke-miterlimit: 10; 
 
     } 
 
     .st1 { 
 
      fill: #F2DE20; 
 
     } 
 
     </style> 
 
     <g id="XMLID_3_"> 
 
     <path id="XMLID_13_" class="st0" d="M29.6,44.8c5,3.6,7.4,8.8,0.9,9.9c-8.8,1.5-20.3-2.7-26.1-9.5c-4.3-5,1.2-7.4,7.5-6.9 
 
    \t \t \t \t \t C18.3,38.8,24.6,41.2,29.6,44.8z" /> 
 

 
     </g> 
 
    </svg> 
 
    </div> 
 
</div>

+1

請提供一些代碼(HTML,CSS等) –

+0

我們需要必要的最低限度的信息,包括HTML,CSS和任何JavaScript你有屬於這種情況的人才能給你一個具體的答案。我可以說的基本知識是,您需要將菜單的z-index更改爲更高。 – Jhecht

+0

我已經添加了文件 –

回答

1

有兩件事情是錯誤的:你的下拉菜單中沒有的z-index高到足以坐在SVG的頂部,你.dropdown-menu代碼有一個RGBA背景,爲95%不透明的(意思是有點透徹)。

通過改變這兩件事,我相信這是你想要的效果。

body { 
 
    padding-right: 0; 
 
    margin-right: 0; 
 
    padding-left: 0; 
 
    margin-left: 0; 
 
    margin-top: 0; 
 
} 
 
.nav { 
 
    background-color: #F6F8FB; 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 80px; 
 
    /*overflow: hidden;*/ 
 
} 
 
svg { 
 
    z-index: -1 
 
} 
 
.nav li { 
 
    float: left; 
 
    padding: 1%; 
 
    font-family: AlegreyaSansSC-Light; 
 
    font-size: 14px; 
 
    color: #637F92; 
 
    letter-spacing: 0.52px; 
 
    height: 100%; 
 
    width: 126px; 
 
    margin-top: 0; 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
    margin-bottom: 0; 
 
} 
 
.nav li:hover { 
 
    /*background-color: #0B619B;*/ 
 
    /*opacity: 0.1;*/ 
 
    /*color: #637F92;*/ 
 
    background: rgb(221, 232, 241); 
 
    /* Fallback for older browsers without RGBA-support */ 
 
    background: rgba(221, 232, 241, 0.95); 
 
} 
 
.nav ul { 
 
    list-style: none; 
 
    /*removes bullet points*/ 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #F6F8FB; 
 
    min-width: 70px; 
 
    /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/ 
 
    padding: 70px 126px; 
 
    opacity: 1; 
 
    z-index: 100; 
 
} 
 
.dropdown-content:hover { 
 
    background: rgb(221, 232, 241); 
 
    /* Fallback for older browsers without RGBA-support */ 
 
    
 
} 
 
.nav li:hover .dropdown-content { 
 
    display: block; 
 
} 
 
.logo-bar { 
 
    background-color: white; 
 
    height: 180px; 
 
    width: 100%; 
 
} 
 
.logo { 
 
    height: 63px; 
 
    width: 56px; 
 
    position: relative; 
 
    top: 25%; 
 
    left: 15%; 
 
    /*border: 3px solid #73AD21;*/ 
 
}
<div class="nav"> 
 
    <ul> 
 
    <li>Wilkommen</li> 
 
    <li>Angebot 
 
     <ul class="dropdown-content"> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     </ul> 
 
    </li> 
 
    <li>Unternehmen 
 
     <ul class="dropdown-content"> 
 
     <li>Hallo</li> 
 
     <li>Hallo2</li> 
 
     </ul> 
 
    </li> 
 
    <li>Anfahrt</li> 
 
    <li>Kontakt</li> 
 
    </ul> 
 
</div> 
 

 
<!-- LOGO BAR --> 
 
<div class="logo-bar"> 
 
    <div class="logo"> 
 
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 63 56" style="enable-background:new 0 0 63 56;" xml:space="preserve"> 
 
     <style type="text/css"> 
 
     .st0 { 
 
      fill: #0D629C; 
 
      stroke: #FFFFFF; 
 
      stroke-width: 0.3177; 
 
      stroke-miterlimit: 10; 
 
     } 
 
     .st1 { 
 
      fill: #F2DE20; 
 
     } 
 
     </style> 
 
     <g id="XMLID_3_"> 
 
     <path id="XMLID_13_" class="st0" d="M29.6,44.8c5,3.6,7.4,8.8,0.9,9.9c-8.8,1.5-20.3-2.7-26.1-9.5c-4.3-5,1.2-7.4,7.5-6.9 
 
    \t \t \t \t \t C18.3,38.8,24.6,41.2,29.6,44.8z" /> 
 

 
     </g> 
 
    </svg> 
 
    </div> 
 
</div>

+1

謝謝,這工作! –

1

您可以嘗試使用z-index的菜單欄後面的圖像位置。

image {z-index: -1;} 
+0

'img {z-index:-1}' – Jhecht

+0

的相關部分,謝謝,但這只是完全刪除圖像 –

+0

我可以看看如果您有開發鏈接的地方。 –