CSS+XHTML极酷导航菜单

2024-09-05 12:19:59

字体：大中小

来源：转载

供稿：网友

CSS+XHTML极酷导航菜单，配合背景图片效果非常好，来自国外网站，符合WEB标准，IE5、IE6、IE7、IE8、火狐浏览器、GG浏览器等都兼容，你可以亲自测试，实际用的时候请根据自己网站的布局再做调整。

<!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: tahoma;	font-size: 12px;}.menu {width:500px;height:355px;background:#fff url(/jscss/demoimg/200906/meeting.jpg) 0 20px no-repeat;position:relative; margin:2em 125px 0 125px;}.menu ul {padding:0; margin:0;list-style-type: none;}.menu ul li {float:left;position:relative;}.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:88px; height:1.5em;font-weight:bold;color:#888; border-bottom:8px solid #888;background:#fff; padding-left:10px; line-height:1.5em;margin-right:2px;}* html .menu ul li a, .menu ul li a:visited {width:98px;w/idth:88px;}.menu ul li ul {display: none;}.menu table {margin:-1px; border-collapse:collapse;font-size:1em;}.menu ul li:hover a,.menu ul li a:hover {color:#000; border-bottom:8px solid #606;}.menu ul li:hover ul,.menu ul li a:hover ul {display:block; position:absolute; top:1.2em;margin-top:11px;left:0; width:96px;border:1px solid #888;border-top:0;background:transparent;}.menu ul li:hover ul li a,.menu ul li a:hover ul li a {display:block; color:#000; border:0;margin:0;color:#333;font-weight:normal; font-size:0.9em;height:auto; line-height:1em; padding:5px; width:86px}.menu ul li:hover ul li a:hover,.menu ul li a:hover ul li a:hover {background:#888; color:#fff;}.menu ul li a:hover ul {background:transparent filter: alpha(opacity=80); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);opacity:0.8;margin-top:10px; marg/in-top:11px; }.menu ul li a:hover ul li a {background:#ddd;width:96px;w/idth:86px;}p.strike {text-decoration:line-through;}</style><body><div class="menu"><ul><li>HomePage<table><tr><td>	<ul>	<li>Sorts</li>	<li>Lastupdate</li>	<li>Active</li>	</ul></td></tr></table></li><li>盒子<table><tr><td>	<ul>	<li>Box</li>	<li>水平菜单</li>	</ul></td></tr></table></li><li>火狐<table><tr><td>	<ul>	<li>IT技术</li>	<li>SOHO一族</li>	<li>月光无限</li>	</ul></td></tr></table></li><li>Explorer<table><tr><td>	<ul>	<li>CSS技术</li>	<li>防火墙</li>	</ul></td></tr></table></li><li>演示<table><tr><td>	<ul>	<li>菜单示例</li>	<li>Ajax技术</li>	<li>网站菜单</li>	</ul></td></tr></table></li></ul></div><br><br><br></body></html>

上一篇：鼠标滑过字体加粗、背景变色的CSS导航栏

下一篇：CSS实现带滚动条的二级竖直菜单