如何在主導航鏈接上添加一個像素陰影以及整個sub-nav下拉菜單？

Question

我在我的主要導航鏈接中使用下拉菜單，並且需要在所有內容（當前導航按鈕/鏈接（使用邊框半徑具有圓角）和整個子導航元素周圍添加一個像素陰影下降）。

我已爲它的演示上的jsfiddle：

http://jsfiddle.net/thebluehorse/TFqjR/2/

是否有人，或更新爲我做什麼，使之有周圍的一切都有一個像素陰影霍芬在導航時鏈接？請注意，它需要繞過主導航欄中的圓角。它需要支持IE7 +，但我猜如果使用box-shadow，那麼CSS3 Pie可以用作幫助器。

任何幫助將不勝感激。這件事一直讓我發瘋。

Answer 1

有很多方法可以實現您的目標。最簡單的方法是將靜態類設置爲嵌套的ul元素。這是因爲它們只有在由父級的懸停事件觸發時纔可見。例如：http://jsfiddle.net/deloretta/gspnK/（注意：爲了防止父元素內部的文本「跳躍」，可以嘗試向元素添加1px的填充並在懸停時將其刪除，或集中對齊文本或任何您喜歡的方法）。

其次，更低效的方式（但有它的用途，我不會去到這裏）你可以找出這個元素有兒童和應用類給他們，像這樣：http://jsfiddle.net/deloretta/XVrr6/

理想情況下，IE7 +樣式將駐留在其自己的樣式表中（因爲IE7 +支持!important語法），您可以使用條件註釋訪問它們。基本上，去掉border屬性並將它們放入IE特定的樣式表中。 IE將忽略-moz-和-webkit-聲明並正確呈現border屬性，而moz/webkit忽略條件註釋並呈現方塊陰影。可愛可愛。

希望這會有所幫助！

編輯 - 回覆您的初始評論：

我想我理解您的評論。如果沒有，請告訴我，我會盡力幫助。

要使這個工作與條件註釋你應該分開這兩種樣式。一個特定於IE，另一個特定於所有其他瀏覽器。你可以是這樣做的：

<link rel="stylesheet" type="text/css" href="/style.css"> 
<!--[if IE]> 
<link rel="stylesheet" type="text/css" href="/style_ie.css"> 
<![endif]--> 

然後，您應該修改現有的樣式表，包含以下信息：

#nav #link1.selected > a { 
    padding-bottom: 10px; 
    margin-bottom: 0; 
    -webkit-border-radius: 5px 5px 0 0; 
    -moz-border-radius: 5px 5px 0 0; 
      border-radius: 5px 5px 0 0; 
    /*the border declaration used to be here 
    but we moved to another stylesheet 
    specifically for IE*/ 
    -webkit-box-shadow:0px 1px 1px #f0f; 
    -moz-box-shadow:0px 1px 1px #f0f; 
} 
.static_class{ 
    /*border used to be here*/ 
    -webkit-box-shadow:0px 1px 1px #f0f; 
    -moz-box-shadow:0px 1px 1px #f0f; 
} 

接下來，創建一個名爲styles_ie.css一個獨立的樣式表 - 這將容納邊界信息，我們從其他樣式表中刪除。像這樣：

#nav #link1.selected > a { 
    border-bottom:1px solid #f0f; 
    border-left:1px solid #f0f; 
    border-right:1px solid #f0f; 
} 
.static_class{ 
    border-bottom:1px solid #f0f; 
    border-left:1px solid #f0f; 
    border-right:1px solid #f0f; 
} 

那麼...會發生什麼？

Internet Explorer是唯一支持條件註釋的瀏覽器。因此，當Firefox，Safari或Chrome登陸頁面時，他們會忽略註釋，因此，不要在註釋中呈現樣式錶鏈接。
當Internet Explorer着陸頁面時，它將呈現從styles.css - 它忽略border-radius和box-shadow屬性等等（因爲它不理解它們）而理解的所有內容。然後它轉向條件註釋（它理解），然後加載樣式表styles_ie.css，然後將額外樣式應用於元素。易鬆脆，檸檬榨汁：]