另类飞出的CSS分类导航菜单

2024-09-05 12:19:54

字体：大中小

来源：转载

供稿：网友

很另类的CSS分类导航菜单，没想到的是它是完全由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:0 auto 50px auto; padding:0; width:302px;}#menu li {padding:0; margin:0; position:relative; width:150px; height:1.7em; 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 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; width:150px; float:right; clear:right;}#menu dt a, #menu dt a:visited {display:block; font-size: 0.9em; color: #c00; text-align:center; border:1px solid #c00; border-width:0 1px 1px 1px; background:#d4d4d4; padding:0.25em 0 0.75em 0;}#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 {width:301px;}#menu li:hover dt a, #menu a:hover dt a {color:#000; background:#ddd; border:1px solid #c00; border-width:0 1px 1px 1px;}#menu dd a, #menu dd a:visited {background:#c00; color:#fff; padding:0.5em 0; text-decoration:none; display:block; text-align:center; border-left:1px solid #c00; border-right:1px solid #c00; width:148px;}#menu dd a:hover {background: #ddd; color:#000; border-left:1px solid #c00; border-right:1px solid #c00;}/* www.vevb.com */#menu b {display:block; overflow:hidden; height:1px;}b.p1 {background:#c00; margin:0 5px;}b.p2 {background:#d4d4d4; border:2px solid #c00; border-width:0 2px; margin:0 3px;}b.p3 {background:#d4d4d4; margin:0 2px; border:1px solid #c00; border-width:0 1px;}b.p4 {height:2px; background:#d4d4d4; margin:0 1px; border:1px solid #c00; border-width:0 1px;}b.p5 {background:#c00; margin:0 5px;}b.p6 {background:#c00; margin:0 3px;}b.p7 {background:#c00; margin:0 2px;}b.p8 {height:2px; background:#c00; 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>JSCSS</dd>	<dd>ExtJs</dd>	<dd>jQuery</dd></dl></li><li><dl>	<dt>网页特效</dt>	<dd>菜单导航</dd>	<dd>层与布局</dd>	<dd>浏览器相关</dd></dl></li><li><dl>	<dt>网站事务</dt>	<dd>联系我们</dd>	<dd>关于我们</dd>	<dd>广告业务</dd></dl></li></ul> </body></html>

上一篇：鼠标划过变阴影的CSS菜单

下一篇：仿QQ迷你首页的左右滚动Tab选项卡