試圖Z-index背後的subnav

所以我想創建一個從背後的圖像後面彈出的下拉導航。我認爲最好的方法是使用z-index，但我似乎無法得到這個工作...這是鏈接，看一看，你會看到我想要做的：http://cottonwood.towermarketing.net/。基本上，當您將鼠標懸停在頂級導航項上時，我希望子導航可以從撕裂的羊皮紙後面滑出。現在我一直在爲此苦苦掙扎。以下是我的CSS和HTML，如果需要更多，我可以發佈更多。任何幫助將是驚人的！試圖Z-index背後的subnav

CSS：

.header { 
    background: url(../../assets/images/repeatable-tear.png) repeat-x; 
    height: auto; 
    position: absolute; 
    z-index: 1; 
    width: 100% 
} 

.top-nav { 
    z-index: 1 
} 

.sub-nav { 
    position:absolute; 
    left:0; 
    display:none; 
    margin:0 0 0 -1px; 
    padding:0; 
    list-style:none; 
    background: #4e8abe; 
    z-index: -1; 
}

HTML：

<div class="header"> 
    <div class="header-container"> 
     <div class="nav"> 
      <ul class="menu"> 
       <li class="top-nav"><a href="#">Home</a></li> 
       <li class="top-nav"><a href="#">One</a> 
        <ul class="sub-nav"> 
         <li><a href="#">One</a></li> 
         <li><a href="#">Two</a></li> 
        </ul> 
       </li> 
       <li class="top-nav"><a href="#">Two</a> 
        <ul class="sub-nav"> 
         <li><a href="#">One</a></li> 
         <li><a href="#">Two</a></li> 
         <li><a href="#">Three</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div>

好，有一些評論我改成了這一點，但我只能得到整個導航去的背後，不僅是sub nav：

CSS .header { height：auto; 寬度：100％ }

.header-bg { 
    background: url(../../assets/images/repeatable-tear.png) repeat-x; 
    height: 175px; 
    position: absolute; 
    z-index: 1; 
    width: 100% 
}

HTML

<div class="header"> 
    <div class="header-bg"></div> 
    <div class="header-container"> 
     <div class="nav"> 
      <ul class="menu"> 
       <li class="top-nav"><a href="#">Home</a></li> 
       <li class="top-nav"><a href="#">One</a> 
        <ul class="sub-nav"> 
         <li><a href="#">One</a></li> 
         <li><a href="#">Two</a></li> 
        </ul> 
       </li> 
       <li class="top-nav"><a href="#">Two</a> 
        <ul class="sub-nav"> 
         <li><a href="#">One</a></li> 
         <li><a href="#">Two</a></li> 
         <li><a href="#">Three</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div>   
</div>

來源

2012-07-17 Robby Huska

你將需要具有頭部元素的外面的分導航菜單。現在，它們與標題（背景所在的位置）處於相同的堆棧上下文中，因此它們只會顯示在背景圖像的頂部，而不管您的z-index值如何。

來源

2012-07-17 14:36:10

我剛剛嘗試將bg關閉.header，並在.header內部直接添加.header-bg的空div，並在其上放置相同的樣式。我現在可以將整個導航欄放在後面，但不僅僅是subnav。越來越近。謝謝 – 2012-07-17 14:46:36

嘗試類似

TOP NAV MENU HTML HERE

SUB NAV HTML HERE

– 2012-07-17 14:51:01

我看到你要去哪裏，但我似乎無法得到這個概念工作......謝謝。 – 2012-07-17 15:26:57

考慮您的層次結構。背景元素和下拉元素都應該在同一層。背景元素包含下拉元素這一事實，您將無法將其歸入遺忘狀態。將您的背景應用於div.header-container，然後將div.nav上移一個級別（div.header-container之外，轉入div.header），您將能夠解決此問題。當然，在一些定位的幫助下，你將能夠實現你正在瞄準的目標。

來源

2012-07-17 14:39:38

我編輯了HTML和CSS到上面。越來越近......謝謝！ – 2012-07-17 14:52:41

試圖Z-index背後的subnav

回答

相關問題