当前位置：文江博客话题详情

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

发布于 2024-11-03 05:02:34 字数 395 浏览 0 评论 0原文

我正在使用带有主导航链接的下拉菜单，并且需要在所有内容周围添加一个像素下拉阴影（当前导航按钮/链接（使用边框半径具有圆角）以及下降的整个子导航元素向下）。

我已经在 JSFiddle 上发布了它的演示：

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

有人可以更新它吗？或者对我来说，当鼠标悬停在导航链接上时，该怎么做才能使其在所有内容周围都有一个像素阴影？请注意，它需要绕过主导航中的圆角。它需要支持IE7+，但我想如果使用box-shadow那么CSS3 Pie可以作为帮助器。

任何帮助将不胜感激。这件事已经让我发疯了。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

森末i 2024-11-10 05:02:34

有多种方法可以实现您的目标。最简单的方法是为嵌套的 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，然后将额外的样式应用到元素。简单易行，柠檬汁:]

There are a number of ways to achieve your goal. The simplest is to set a static class to your nested ul elements. This is because they are only ever visible when they are triggered by the parent's hover event. Example: http://jsfiddle.net/deloretta/gspnK/ (note: to prevent the text inside the parent element from "jumping" about, you could try adding a padding of 1px to the element and removing it on hover, or aligning text centrally, or whatever method you like).

Secondly, the more inefficient way (but has it's uses which I wont go in to here) you can find out if this element has children and apply the class to them like so: http://jsfiddle.net/deloretta/XVrr6/

Ideally, the IE7+ styles would reside in their own style sheet (as IE7+ supports the !important syntax) and you could access them using conditional comments. Basically, strip out the border properties and place them into an IE specific stylesheet. IE will ignore the -moz- and -webkit- declarations and render the border properties correctly, whilst moz/webkit ignore the conditional comments and render the box shadow. Lovely jubbly.

Hope this helps!

EDIT - response to your initial comment:

I think I understand your comment. If not, let me know and I will try to help further.

To make this work with conditional comments you should separate the two styles. One specific for IE and the other for all other browsers. You can do that like this:

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

You should then modify your existing stylesheet to contain this information:

#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;
}

Next, create a separate style sheet called styles_ie.css - this will house the border information we removed from the other stylesheet. Like so:

#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;
}

So... What happens?

Internet Explorer is the only browser that supports conditional comments. So when Firefox, Safari or Chrome lands on the page, they ignore the comments, and consequently, don't render the style sheet linked in the comments.
When Internet Explorer lands on the page, it renders everything it understands from the styles.css - ignoring the border-radius and box-shadow properties and so on (because it doesn't understand them). It then moves on to the conditional comments (which it understands) then loads up the style sheet styles_ie.css and then applies the extra style to the elements. Easy-peasy, lemon-squeezy :]

回复收藏 0 原文

~没有更多了~