带圆角的纯CSS下拉导航菜单

2024-09-05 12:19:57

字体：大中小

来源：转载

供稿：网友

这个菜单没有使用任何的图片，完全是用CSS实现的，包括圆角效果也同样是，而且还考虑了多浏览器的兼容性，可以说非常不错，既兼容性好，又外观漂亮，下拉导航菜单目前比较流行，好好感觉一下本款菜单，将颜色试着修改一下，达到和您网站完美搭配的效果。

<!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的圆角二级下拉菜单</title><style type="text/css">#menu {list-style-type:none; margin:40px auto 100px auto; padding:0; width:608px;}#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;}#menu li dl {position:absolute; top:0; left:0; padding-bottom:0;}#menu li a, #menu li a:visited {text-decoration:none;}#menu li dd {display:none;}#menu li a:hover {border:0;}#menu li:hover dd, #menu li a:hover dd {display:block;}#menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;}#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}#menu dl {width: 150px; margin: 0; padding: 0; background: transparent;}#menu dt {margin:0; padding: 0;}#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;}#menu dt a, #menu dt a:visited {display:block; font-size: 0.9em; color: #038; text-align:center; border:1px solid #08c; border-width:0 1px 1px 1px; background:#d4d4d4; padding:0.25em 0 0.75em 0;}#menu li:hover dt a, #menu a:hover dt a {color:#006; background:#ddd; border:1px solid #08c; border-width:0 1px 1px 1px;}#menu dd a, #menu dd a:visited {background:#08c; color:#fff; padding:0.5em 0; text-decoration:none; display:block; text-align:center; border-left:1px solid #08c; border-right:1px solid #08c;}#menu dd a:hover {background: #ddd; color:#000; border-left:1px solid #08c; border-right:1px solid #08c;}#menu b {display:block; overflow:hidden; height:1px;}#menu b.p1 {background:#08c; margin:0 5px;}#menu b.p2 {background:#d4d4d4; border:2px solid #08c; border-width:0 2px; margin:0 3px;}#menu b.p3 {background:#d4d4d4; margin:0 2px; border:1px solid #08c; border-width:0 1px;}#menu b.p4 {height:2px; background:#d4d4d4; margin:0 1px; border:1px solid #08c; border-width:0 1px;}#menu b.p5 {background:#08c; margin:0 5px;}#menu b.p6 {background:#08c; margin:0 3px;}#menu b.p7 {background:#08c; margin:0 2px;}#menu b.p8 {height:2px; background:#08c; margin:0 1px;}#menu li:hover b.p2, #menu a:hover b.p2 {background:#fff;}#menu li:hover b.p3, #menu a:hover b.p3 {background:#f0f0f0;}#menu li:hover b.p4, #menu a:hover b.p4 {background:#e8e8e8;}</style></head><body><ul id="menu"><li><dl>	<dt>源码爱好者</dt>	<dd>网站首页</dd>	<dd>网页特效</dd>	<dd>网站留言</dd></dl></li><li><dl>	<dt>分类导航</dt>	<dd>ASP源码</dd>	<dd>PHP源码</dd>	<dd>Java源码</dd></dl></li><li><dl>	<dt>LAYOUTS</dt>	<dd>Codes</dd>	<dd>Demo Menu</dd>	<dd>Explorer</dd></dl></li><li><dl>	<dt>MOZILLA</dt>	<dd>SiteURL</dd>	<dd>Target</dd></dl></li></ul> </body></html>

上一篇：CSS用滤镜打造的椭圆型导航菜单

下一篇：兼容好的CSS横向导航条