css - 如何在主导航链接周围添加一个像素的阴影以及整个子导航下拉列表？

Question

我在主导航链接中使用下拉菜单，需要在所有内容(当前导航按钮/链接(使用 border-radius 具有圆 Angular )和整个子导航)周围添加一个像素的阴影下拉的元素)。

我已经在 J​​SFiddle 上发布了它的演示:

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

有人可以更新它或者告诉我如何做才能让它在导航链接上悬停时在所有内容周围都有一个像素的阴影吗？请注意，它需要绕过主导航中的圆 Angular 。它需要支持 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 忽略条件注释并呈现盒子阴影。可爱的 jubbly。

希望这对您有所帮助!

编辑 - 对您最初评论的回应:

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

要使它与条件注释一起使用，您应该将两种样式分开。一个专用于 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，然后将额外的样式应用于元素。简单易行，柠檬挤压:]