CSS+XHTML有立体感的菜单

2024-09-05 12:20:04

字体：大中小

来源：转载

供稿：网友

立体感很不错的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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS+XHTML有立体感的菜单</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(/jscss/demoimg/200906/line.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(/jscss/demoimg/200906/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(/jscss/demoimg/200906/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(/jscss/demoimg/200906/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(/jscss/demoimg/200906/midb.gif);border-bottom-color:#ccc;}.menu a:hover em.lft {background: transparent url(/jscss/demoimg/200906/leftb.gif);border-bottom-color:#ccc;}.menu a:hover em.rgt {background: transparent url(/jscss/demoimg/200906/rightb.gif);border-bottom-color:#ccc;}.menu li:hover > a b{color:#000;background: transparent url(/jscss/demoimg/200906/midb.gif);border-bottom-color:#ccc;}.menu li:hover > a em.lft {background: transparent url(/jscss/demoimg/200906/leftb.gif);border-bottom-color:#ccc;}.menu li:hover > a em.rgt {background: transparent url(/jscss/demoimg/200906/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><em class="lft"></em><b>源码网站</b><em class="rgt"></em><ul><li>嘿嘿</li><li>哈哈</li><li>哦哦</li></ul></li><li><em class="lft"></em><b>CSS菜单</b><em class="rgt"></em><ul><li>国外菜单</li><li>国内菜单</li></ul></li><li><em class="lft"></em><b>英文示例</b><em class="rgt"></em><ul><li>The Girl with Green Eyes</li><li>The Dream</li><li>Woman in Blue</li></ul></li><li><em class="lft"></em><b>我的编程乐园</b><em class="rgt"></em><ul><li>学习型</li><li>实用型</li></ul></li></ul></div></body></html>

上一篇：在网页右上角隐藏的滑出菜单

下一篇：一款类似滑动门功能的国外菜单