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

2024-09-05 12:20:04

字体：大中小

来源：转载

供稿：网友

一款国外设计的漂亮菜单，有点类似滑动门的功能，鼠标放上后显示二级菜单，很好的效果。

<!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>一款国外设计的漂亮菜单</title></head><style type="text/css"> body {	background: #fff;	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;	font-size: 12px;}#nav {margin:20px 0 80px 0;}#nav {float:left; padding-left:10px; width:740px; height:auto;background:#d1e1ce url("/jscss/demoimg/200906/bg.gif") repeat-x bottom;}#nav .select, #nav .current {margin:2.6em 0 0 0; padding:0; list-style:none; display:block; float:left;}#nav .sub {margin:0; padding:0; list-style:none;}#nav li {display:block; float:left; margin:0; padding:0; position:relative; z-index:100;}#nav .current li {z-index:50;}#nav .select a, #nav .current a {display:block; height:2.5em; float:left; width:100px; background:url("/jscss/demoimg/200906/left_both.gif") no-repeat left top; padding:0 0 0 9px; border-bottom:1px solid #765; text-decoration:none; font-weight:bold; line-height:2.4em; white-space:nowrap;}#nav .one a {width:10em;}#nav .two a {width:19em;}#nav .three a {width:9.5em;}#nav .four a {width:9em;}#nav .select a b, #nav .current a b {height:100%; display:block; background:url("/jscss/demoimg/200906/right_both.gif") no-repeat right top; padding:0 15px 0 6px; color:#553;}#nav .sub {display:none;}#nav table {position:absolute; border-collapse:collapse; left:0; top:0; font-size:1em;}#nav .select a:hover b {color:#000; cursor:pointer;}#nav .current a {background-position:0 -150px; border-color:#fff;}#nav .current a b {background-position:100% -150px; color:#000;}#nav .sub li a:hover, #nav .select a:hover .sub li a:hover, #nav .select li:hover .sub li a:hover {border-color:#aba; background:#d1e1ce; color:#000;}#nav .current .sub .current_sub a, #nav .current .sub a:hover {border-color:#aba; background:#d1e1ce; color:#000;}#nav .current .sub, #nav .select a:hover .sub, #nav .select li:hover .sub {display:block; position:absolute; width:730px; top:2.5em; background:#fff; margin-top:1px; padding:10px 0 20px 0;}* html #nav .current .sub, * html #nav .select a:hover .sub {margin-top:0; margin-t/op:1px;}#nav .current .sub li a, #nav .select a:hover .sub li a, #nav .select li:hover .sub li a {display:inline; background:#fff; border:1px solid #ddd; padding:0 10px; margin:0 10px 0 0; width:auto; white-space:nowrap; font-weight:normal; font-size:0.9em; height:2em; line-height:1.9em;}#nav .select a:hover, #nav li:hover a {background-position:0% -150px; border-color:#fff;}#nav .select a:hover b, #nav .select li:hover a b {background-position:100% -150px; border-color:#fff; color:#000;}#nav .one .sub {left:0;}#nav .two .sub {left:-10em; margin-left:-9px;}#nav .three .sub {left:-29em; margin-left:-18px;}* html #nav .three .sub {margin-left:-9px; marg/in-left:-18px;}#nav .four .sub {left:-38.5em; margin-left:-27px;}* html #nav .four .sub {margin-left:-18px; marg/in-left:-27px;}</style><body><div id="nav"><ul class="select one"><li><b>我的网站</b><ul class="sub"><li>我的更新</li><li>关注排行</li></ul></li></ul><ul class="current two"><li><b>我的日记</b><ul class="sub"><li>最新日记</li><li class="current_sub">今日更新</li><li>请联系我</li></ul></li></ul><ul class="select three"><li><b>CSS特效</b><ul class="sub"><li>布局类</li><li>菜单类</li><li>广告类</li></ul></li></ul><ul class="select four"><li><b>如何联系</b><ul class="sub"><li>我的信箱</li><li>我的QQ</li><li>我的MSN</li></ul></li></ul></div></body></html>

上一篇：CSS+XHTML有立体感的菜单

下一篇：CSSplay网站的二级滑动菜单