如何在主导航链接上添加一个像素阴影以及整个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，然后将额外样式应用于元素。易松脆，柠檬榨汁：]