这里用css实现无滤镜的阴影效果。 代详情如下：
xhtml代码：
例如：
href='http://www.goodjob.cn/'中国俊才网中国俊才网
href='http://www.goodjob.cn/'中国俊才网中国俊才网
href='http://www.goodjob.cn/'中国俊才网中国俊才网
href='http://www.goodjob.cn/'中国俊才网中国俊才网
href='http://www.goodjob.cn/'中国俊才网中国俊才网
其中，id为menu的无序列表定义为菜单的容器，其中列表项目li为菜单栏。 在此，行内对象span位于列表项目li中的链接a标签内，它是阴影效果的载体，通过CSS定义实现阴影效果。
CSS代码：示例：
#menu {
padding:0；
margin:0；
height:2em；
列表样式类型： none；
border-left :1 px固态# BBB；
}
#menu li {
浮点：左；
width:8em；
height:2em；
line-height:2em；
border-right :1 px固态# BBB；
position:relative；
文本对齐3360中心；
}
在此，我们将名为menu的无序列表的所有填充和边距定义为零。 高度是2em。 清除默认列表项目的预设标记。 定义菜单的列表项目向左浮动，宽度和高度分别为2em。 行高为2em，实现了文字的垂直中央。 设置相对位置，并设置文本的水平居中对齐。
请注意：我们在ul上设置了左边框为1px的实线，颜色是灰色的。 border-left:1px
实体# BBB； 我们在li右边的方框设置了1px的实绩，颜色是灰色。 border-right :1 px固态# BBB；
这样，就实现了存在左右分割的线。
例如：
#menu li a，# menu lia : visited { display : block；
文本修饰：无； color:#000； }
#menu li a span，# menu lia :受欢迎的span { display : none； }
定义链接的link和visited状态的样式并设置块元素。 没有装饰线，颜色是#000。 另外，在link和visited的状态下，链接元件内的span元件不可见，是display:none。 例如：
# menu lia : hover { border :0； color:#bbb； }
# menu lia : hoverspan { display : block； width:8em； height:2em；
文本对齐3360中心； 位置： absolute； left:-1px； top:-2px；
color:#000； cursor:pointer； }
在hover上悬停鼠标时，链接的字符颜色为#bbb。 阴影文字的颜色。 此时，span内联元素的字符设置发生了很大变化，请查看代码。 将宽度和高度分别设定为8em、2em的块元素。 字符水平居中，采用绝对对齐，左起-1px，上起-2px。 文字颜色为黑色，鼠标指针为“pointer”。
实现原理和思路总结：在正常情况下，链接中的字符为黑色，链接span元素中的字符不可见。 鼠标停止的时候。 将链接文本设置为浅灰色阴影，将链接span元素中的文本设置为黑色，然后将其位置向左和向上稍微偏移。 这样就实现了这个菜单的效果。
让我们看看完整的CSS代码：
/p
transitional//en ' http://www.w3.org/tr/XHTML1/dtd/XHTML1- transitional.dtd '
css带来的阴影效果(无滤镜实现(#menu {
padding:0；
margin:0；
height:2em；
列表样式类型： none；
border-left :1 px固态# BBB；
}
#menu li {
浮点：左；
width:8em；
height:2em；
line-height:2em；
border-right :1 px固态# BBB；
position:relative；
文本对齐3360中心；
}
#menu li a，#menu li a:visited {
显示： block；
文本修饰：无；
color:#000；
}
#menu li a span，# menu Li a :受欢迎的span {
显示：无；
}
#menu li a:hover {
border:0；
color:#bbb；
}
#menu li a:hover span {
显示： block；
width:8em；
height:2em；
文本对齐3360中心；
位置： absolute；
left:-1px；
top:-2px；
color:#000；
cursor:pointer；
}
id='menu '
href='http://www.goodjob.cn/'中国俊才网中国俊才网
href='http://www.goodjob.cn/'中国俊才网中国俊才网
href='http://www.goodjob.cn/'中国俊才网中国俊才网
href='http://www.goodjob.cn/'中国俊才网中国俊才网
href='http://www.goodjob.cn/'中国俊才网中国俊才网