我有一個Z指數下拉問題

我想把下拉欄放在主導航欄後面，這是與Z指數一起工作，但是一旦你將光標從主導航欄移開並移動到下拉菜單下拉菜單消失，不允許您單擊鏈接。任何幫助都是極好的！我有一個Z指數下拉問題

HTML

<nav class="top-nav"> 
     <ul> 
      <li><a href="#">About Me</a></li> 
      <li><a href="#">Headshots</a></li> 
      <li><a href="#">Performances</a> 
       <ul> 
        <li><a href="#">Fantasticks</a></li> 
        <li><a href="#">Little Women</a></li> 
        <li><a href="#">Tough Jet Girl</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Resume</a></li> 
      <li><a href="#">Videos</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </nav><!--- End top-nav -->

CSS

.top-nav ul ul { 
background: #E08399; 
background: linear-gradient(top, #E08399 0%, #D66082 40%); 
background: -moz-linear-gradient(top, #E08399 0%, #D66082 40%); 
background: -webkit-linear-gradient(top, #E08399 0%,#D66082 40%); 
border-radius: 0px 0px 5px 5px; 
padding-left: 0px; 
padding-top: 5px; 
padding-bottom: 5px; 
position: absolute; 
top: 100%; 
box-shadow: 0px 3px 8px #9C8066; 
z-index: -1;

來源

2014-06-16 Garrett Sanderson

的jsfiddle？可能是子元素和菜單位置之間的小像素差異，這意味着它在技術上不會被猜測再次徘徊。 – Rooster

如果您可以更好地描述lite，您將嘗試存檔的內容以及您遇到問題的瀏覽器會更好。 – Anton

這是在Chrome中，我希望下拉菜單落在我已經實現的導航欄後面，但是當您將鼠標拉向下拉菜單時消失。 –

你的下拉菜單中越來越消失，因爲沒有你的父元素的任何連接它。所以你需要指定position：相對於你的父元素。這意味着您的子元素絕對位置將在父元素內部計算，並且將在此父元素下可見。

CSS：

.top-nav ul li:hover ul { 
    background: #E08399; 
    background: linear-gradient(top, #E08399 0%, #D66082 40%); 
    background: -moz-linear-gradient(top, #E08399 0%, #D66082 40%); 
    background: -webkit-linear-gradient(top, #E08399 0%,#D66082 40%); 
    border-radius: 0px 0px 5px 5px; 
    padding-left: 0px; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    position: absolute; 
    top:100%; 
    box-shadow: 0px 3px 8px #9C8066; 
    z-index: 5; 
    display:block; 
    list-style-type:none; 
    } 
    .top-nav ul li ul{display:none} 
    .top-nav ul li{position:relative;}

Have a Fiddle Demo!

來源

2014-06-17 07:52:42

我有一個Z指數下拉問題

回答

相關問題