如何在选项卡菜单中将阴影添加到当前元素？

我有一个标签式菜单，看起来像这样：

它的html很简单：

 
 
<%= Html.ActionLink(c=>c.Index(), "Home") %> 
 
<%= Html.ActionLink(c=>c.About(), "About") %> 
 
<%= Html.ActionLink(c=>c.Archives(), "Archives") %> 
 
<%= Html.ActionLink(c=>c.Links(), "Links") %> 
 
 
 
  

和JQuery：

 $(function() { $('.container').corner(); $('ul#menu li').corner('30px top'); }); 

并在每个页面上的东西：

 $(function() { $('#menuHome').addClass('current') }) 

我想指出“当前”标签后面有一个投影。 我想我会这样做

1. 使用$（’。current’）创建一个阴影’li’。（’＆nbsp

“）

2. 使用CSS设置阴影颜色并使用jquery绕右上角
3. 用CSS位置移动它：relative; 上：5px; 左：-5px;

我遇到的问题是阴影出现在左侧元素的顶部。 将其z指数设置为低会使其由于某种原因完全消失。 如何让它出现在上一个列表项后面？

或者，有什么更好的方法呢？

Answer 1

将此样式应用于当前选项卡（不是阴影）：

 { position: relative; z-index:2; } 

这就是阴影

 { position: relative; z-index:1; } 

Answer 2

我想你可能想考虑使用CSS box-shadow技术。 Mozilla和Webkit已经实现了它，并且box-shadow符合CSS3规范，所以有一天它应该被广泛采用。 IE还有一个盒子阴影filter，但我不知道它是否显示出非常好的外观阴影。 但是，如果您使用这种技术，它会更有效率。 虽然它不适用于每个浏览器，但它会为大多数用户提供类似的效果。

这里有一些关于它的更多细节的链接： http ： //www.css3.info/preview/box-shadow/

以下是有关IEfilter的一些信息（未充分利用）： http ： //www.ssi-developer.net/css/visual-filters.shtml

如果您要在整个图像周围寻找阴影，请考虑使用IE发光滤镜而不是阴影。

如果您想尝试这种技术，可以使用以下示例CSS。

 div#someID { box-shadow: 10px 10px 5px #888; -moz-box-shadow: #888 10px 10px 5px; -webkit-box-shadow: #888 10px 10px 5px; FILTER: DropShadow(Color=#888, OffX=5, OffY=-3, Positive=1); } 

Answer 3

我怀疑的方式.corner(); 作品是通过绘制数百个与其背后颜色相同的1px div。 至少，阴影首先必须是.corner() 。 如果这仍然不起作用，那么实际上.corner()只是采用背景颜色（白色）。

Answer 4

我搞砸了这个并最终添加了以下内容（注意：我将Archives设置为current以便更好地查看）

CSS

 .shadow { background-color: #333; border-color: #333; z-index: -1; position: absolute; opacity: 0.7; filter: alpha(opacity=70); } 

jQuery的

 $(function() { $('#menuArchives').addClass('current'); $('#menu').after('
'); var c = $('.current'); var widthoffset = 50; var heightoffset = 20; var topoffset = -4; var leftoffset = -2; $('.shadow').css({ width : c.width() + widthoffset + 'px', height : c.height() + heightoffset + 'px', top : c.offset().top + topoffset + 'px', left : c.offset().left + leftoffset + 'px' }).corner('30px top'); }) 

您可以稍微处理变量以获得您想要的阴影：P

编辑：它似乎不适用于IE，但其他一些部分也关闭了…我会再看一下Edit2：好的，我让它在IE中工作，但现在很明显角落由一堆div组成，背景不匹配 – 在FF和Chrome中看起来很好