有立体感的CSS菜单

代码简介：

立体感很不错的CSS+XHTML菜单，看上去还不错，来自CSSplay网站，老外的作品就是不一样，最基码兼容性非常好，符合WEb标准，不过用到了几个图片，你需要下载他们，以后就方便了。

代码内容：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 有立体感的CSS菜单_网页代码站(www.webdm.cn) </ title >
</ head >
< style type ="text/css" >
body {
background : #fff ;
font-family : "Lucida Grande", Helvetica, Arial, sans-serif ;
font-size : 12px ;
}

.menu {
position : relative ;
width : 750px ;
height : 2em ;
background : #b7c6ac ;
border-top : 10px solid #b7c6ac ;
padding-bottom : 1px ;
background : #b7c6ac url(http://www.webdm.cn/images/20090910/line33.gif) bottom left repeat-x ;
margin-bottom : 5em ;
}

* html .menu { padding-bottom : 0 ; }

.menu ul {
list-style-type : none ;
padding : 0 ;
margin : 0 0 0 20px ;
width : 730px ;
height : 100% ;
}

.menu li {
float : left ;
}

.menu table {
position : absolute ;
border-collapse : collapse ;
left : 0 ;
top : 0 ;
}

.menu a, .menu :visited {
color : #fff ;
text-decoration : none ;
}
.menu a em.lft, .menu :visited em.lft {
display : block ;
float : left ;
width : 5px ;
height : 2em ;
background : transparent url(http://www.webdm.cn/images/20090910/lefta.gif) ;
border-bottom : 1px solid #777 ;
}
.menu a b, .menu :visited b {
display : block ;
font-weight : normal ;
float : left ;
padding : 0 10px ;
height : 2em ; line-height : 1.9em ;
background : transparent url(http://www.webdm.cn/images/20090910/mida.gif) ;
cursor : pointer ;
border-bottom : 1px solid #777 ;
}
.menu a em.rgt, .menu :visited em.rgt {
display : block ;
float : left ;
width : 5px ;
height : 2em ;
background : transparent url(http://www.webdm.cn/images/20090910/righta.gif) ;
border-bottom : 1px solid #777 ;
}

.menu ul ul {
visibility : hidden ;
position : absolute ;
height : 2em ;
top : 2em ;
left : -20px ;
width : 749px ;
border-bottom : 1px solid #777 ;
border-right : 1px solid #777 ;
background : #ccc ;
}

.menu :hover {
white-space : normal ;
}

.menu a:hover b {
color : #000 ;
background : transparent url(http://www.webdm.cn/images/20090910/midb.gif) ;
border-bottom-color : #ccc ;
}
.menu a:hover em.lft {
background : transparent url(http://www.webdm.cn/images/20090910/leftb.gif) ;
border-bottom-color : #ccc ;
}
.menu a:hover em.rgt {
background : transparent url(http://www.webdm.cn/images/20090910/rightb.gif) ;
border-bottom-color : #ccc ;
}

.menu li:hover > a b
{
color : #000 ;
background : transparent url(http://www.webdm.cn/images/20090910/midb.gif) ;
border-bottom-color : #ccc ;
}
.menu li:hover > a em.lft {
background : transparent url(http://www.webdm.cn/images/20090910/leftb.gif) ;
border-bottom-color : #ccc ;
}
.menu li:hover > a em.rgt {
background : transparent url(http://www.webdm.cn/images/20090910/rightb.gif) ;
border-bottom-color : #ccc ;
}
.menu ul li:hover ul,
.menu ul a:hover ul {
display : block ;
visibility : visible ;
top : 2em ;
margin-top : 1px ;
}

.menu ul :hover ul li {
display : block ;
border-left : 1px solid #777 ;
background : #ccc ;
height : 2em ;
}
.menu ul :hover ul li a {
display : block ;
font-size : 0.8em ;
height : 2em ;
line-height : 2.5em ;
width : auto ;
float : left ;
color : #444 ;
padding : 0 10px ; }
.menu ul :hover ul li a:hover {
color : #c00 ;
}
</ style >
< body >

< div class ="menu" >
< ul >
< li >< a href ="http://www.webdm.cn" title ="John Constable" >< em class ="lft" ></ em >< b > 网页代码站 </ b >< em class ="rgt" ></ em > <!-- [if IE 7]><! --> </ a > <!--

<![endif] -->
<!-- [if lte IE 6]><table><tr><td><![endif] -->
< ul >
< li >< a href ="#" title ="我是嘿嘿" > 嘿嘿 </ a ></ li >
< li >< a href ="#" title ="我是哈哈" > 哈哈 </ a ></ li >
< li >< a href ="#" title ="我是哦哦" > 哦哦 </ a ></ li >
</ ul >
<!-- [if lte IE 6]></td></tr></table></a><![endif] -->
</ li >
< li >< a href ="#" title ="William Turner" >< em class ="lft" ></ em >< b > CSS菜单 </ b >< em class ="rgt" ></ em > <!-- [if IE 7]><! --> </ a > <!-- <![endif] -->
<!-- [if lte IE 6]><table><tr><td><![endif] -->
< ul >
< li >< a href ="http://www.webdm.cn" title ="Fishermen at Sea" > 国外菜单 </ a ></ li >
< li >< a href ="#" title ="The Shipwreck" > 国内菜单 </ a ></ li >
</ ul >
<!-- [if lte IE 6]></td></tr></table></a><![endif] -->
</ li >
< li >< a href ="#" title ="Henri Matisse" >< em class ="lft" ></ em >< b > 英文示例 </ b >< em class ="rgt" ></ em > <!-- [if IE 7]><! --> </ a > <!-- <![endif] -->
<!-- [if lte IE 6]><table><tr><td><![endif] -->
< ul >
< li >< a href ="http://www.webdm.cn" title ="The Girl with Green Eyes" > The Girl with Green Eyes </ a ></ li >
< li >< a href ="#" title ="The Dream" > The Dream </ a ></ li >
< li >< a href ="#" title ="Woman in Blue" > Woman in Blue </ a ></ li >
</ ul >
<!-- [if lte IE 6]></td></tr></table></a><![endif] -->
</ li >
< li >< a href ="#" title ="Paul Cezanne" >< em class ="lft" ></ em >< b > 网页代码站 </ b >< em class ="rgt" ></ em > <!-- [if IE 7]><! --> </ a > <!-- <![endif] -->
<!-- [if lte IE 6]><table><tr><td><![endif] -->
< ul >
< li >< a href ="#" title ="学习型源代码" > 学习型源码 </ a ></ li >
< li >< a href ="http://www.webdm.cn" title ="实用型源代码" > 实用型源码 </ a ></ li >
</ ul >
<!-- [if lte IE 6]></td></tr></table></a><![endif] -->
</ li >
</ ul >
</ div >
</ body >
</ html >
< br >
< p >
< a href ="http://www.webdm.cn" > 网页代码站 </ a > - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！ </ p >

 

代码来自：http://www.webdm.cn/webcode/e773d443-47ba-4d03-b2b8-ab00c19cda40.html

转载于:https://www.cnblogs.com/webdm/archive/2011/01/29/1947465.html