2011-11-17 67 views
0

我有一個使用jQuery工作的簡單的手風琴菜單,但我在設計風格時遇到了麻煩,所以每個元素都會在後續每個元素上投下陰影。該菜單由一個無序列表組成,其中每個元素都是一個鏈接,它會觸發一個slideDown/Up點擊顯示​​/隱藏某個部分。我所需要的是每個標題,橙色框,在後面的一個上投下陰影,但似乎沒有任何z-indexing可以克服列表設置的默認值(如果我刪除列表背景或使陰影上升而不是倒下,我可以看到他們)。手風琴菜單中的陰影菜單

Here you can see I've tried everything I can think of to make things order correctly。我按降序對z列表元素和錨點進行了z索引,但仍然沒有運氣。任何人都知道如何讓盒子陰影在這裏正常工作?你可以看到最後一個項目的影子看起來發現,我想在每個項目下。

回答

1

其實你是如此接近......

原因:

  1. 堆疊順序覆蓋陰影
  2. 的z-index只與元素與工作等positionstatic

因此,解決方案將爲: 對於使用z-index的元素,請添加position:relative。因此,添加更多的規則應該有所幫助:

ul#menu li, 
ul#menu li a { 
    position:relative 
} 

應該沒關係除IE,其中有爲了一些小麻煩,支持負的z-index和位置最瀏覽器:相對的 - 但因爲他們沒有漂亮的盒子陰影,你可能會忽略它們。

替代:如果你不喜歡使用的z-index爲每李先生,你可能更喜歡inset箱陰影,

ul#menu li a { 
    box-shadow:inset 0px 6px 13px #777; 
} 

陰影較弱和瀏覽器的支持更窄(最新的現代瀏覽器)但編碼更容易。

p.s.對於這個問題,添加一個CSS標籤會有很大的幫助。

+0

添加標籤!這似乎工作,但只在李。是否有可能在錨標題上獲得陰影,以便陰影在打開時在選項卡內容上投射?謝謝! – Primus202

+0

沒關係!得到它了。設置錨點的z-index高於內容ul,這一切都可以實現!非常感謝。 – Primus202

+0

歡迎您:) – vincicat