我有一個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>
請提供一些代碼(HTML,CSS等) –
我們需要必要的最低限度的信息,包括HTML,CSS和任何JavaScript你有屬於這種情況的人才能給你一個具體的答案。我可以說的基本知識是,您需要將菜單的z-index更改爲更高。 – Jhecht
我已經添加了文件 –