如何在主导航链接周围添加一个像素投影以及整个子导航下拉菜单

Question

我正在使用下拉菜单与我的主导航链接，需要添加一个一个像素的下拉阴影周围的一切(当前的nav按钮/链接(圆角使用border-radius)和整个子导航元素下拉)

我已经在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忽略条件注释并渲染框阴影。可爱的jubb。

希望这对你有帮助!

编辑-回复你最初的评论:

我想我理解你的评论。如果没有，请告诉我，我会尽力进一步帮助你。

要使条件注释工作，你应该把这两种样式分开。一个特定于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;
}

所以…会发生什么呢?

ie是唯一支持条件注释的浏览器。因此，当Firefox, Safari或Chrome进入页面时，它们会忽略注释，因此不会呈现注释中链接的样式表。
当Internet Explorer进入页面时，它呈现它从styles.css中理解的所有内容—忽略border-radius和box-shadow属性等等(因为它不理解它们)。然后转到条件注释(它能理解)，然后加载样式表styles_ie.css，然后将额外的样式应用到元素上。Easy-peasy, lemon-squeezy:]