下拉菜單覆蓋div

你好，我想添加一個下拉菜單到我的頂部導航欄。但由於某種原因，它被我的圖像滑塊隱藏起來。我想將下拉內容放在所有應有的位置上。下拉菜單覆蓋div

/* Style The Dropdown Button */ 
 
.dropbtn { 
 
    cursor: pointer; 
 
} 
 
/* The container <div> - needed to position the dropdown content */ 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    z-index: 999; 
 
} 
 
/* Dropdown Content (Hidden by Default) */ 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #565656; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
/* Links inside the dropdown */ 
 
.dropdown-content a { 
 
    color: white; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
/* Change color of dropdown links on hover */ 
 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 
/* Show the dropdown menu on hover */ 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<div id="header"> 
 
    <ul> 
 
    <li> 
 
     <a class="a-no-hover" href="index.html"> 
 
     <img src="images/miniLogo.png" /> 
 
     </a> 
 
    </li> 
 
    <li><a class="active" href="index.html">HOME</a> 
 
    </li> 
 
    <div class="dropdown"> 
 
     <li class="dropbtn"><a href="product.html">PRODUCTS</a> 
 
     </li> 
 
     <div class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
     </div> 
 
    </div> 
 
    <li><a href="order.php">ORDER</a> 
 
    </li> 
 
    <li><a href="about.html">ABOUT US</a> 
 
    </li> 
 
    <li><a href="contact.html">CONTACT US</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div id="section1"> 
 
    <img id="img" src="images/bg.jpg" /> 
 
</div>

來源

2016-04-29 Crimson-Med

對不起，我們需要更多信息。這是我得到：http://output.jsbin.com/gisamajihi –

@PraveenKumar http://jsbin.com/gawefajiza/edit?html,css,output –

我發現這個問題已經。試試我的解決方案，讓我知道。什麼是滑塊的z-index？ –

你給z-index到標題菜單，這很好。但內容是什麼問題。所以，試着給z-index到.dropdown-content：

/* Dropdown Content (Hidden by Default) */ 
.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #565656; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 1000; /* One more than the header. */ 
}

更新

#header ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    /* overflow: hidden; Remove this. */ 
    text-align: center; 
    vertical-align: middle; 
}

預覽

輸出：http://jsbin.com/lorebubizi/1

來源

2016-04-29 16:24:28

我試過了，它並沒有改變任何東西http://jsbin.com/gawefajiza/edit?html,css,output –

@ Crimson-Med問題是不同的。溢出問題。 –

任何想法如何我可以修復它？ –

下拉菜單覆蓋div

回答

相關問題