滑出浮动层的CSS大块导航菜单

2024-09-05 12:20:04

字体：大中小

来源：转载

供稿：网友

不知道该如何形容这种菜单，好像在微软以及Dell的网站导航地图里见到过，每一个菜单分类就可以细分和重新布局，显得很大气，简约但给你很清新的感觉。
　　最上一行的是菜单总导航，当我们把鼠标放上的时候，会显出该菜单的二级分类，你可以进行重新排版，甚至加入图片也可以，本菜单可以广泛应用到产品一类的网站。

<!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></head><style type="text/css"> body {background: #fff;font-family: "Lucida Grande", Helvetica, Arial, sans-serif;font-size: 12px;}#lists {padding:0; margin:25px 0 50px 15px; list-style:none; position:relative; height:25px; float:left; background:url(/jscss/demoimg/200906/line2.gif) no-repeat 100% 4px; width:600px; z-index:500;} #lists li {display:inline; float:left;; height:25px; background:url(/jscss/demoimg/200906/line2.gif) no-repeat 0 4px;}#lists li a.tl {display:block; width:150px; height:25px; text-decoration:none; line-height:20px; font-size:12px; font-weight:bold; text-indent:10px; font-weight:normal; color:#000; background:url(/jscss/demoimg/200906/white_arrow2.gif) no-repeat 130px 5px;}#lists div {display:none;}#lists li a:hover {text-decoration:underline; white-space:normal; background-position:130px 15px;}#lists li:hover > a {text-decoration:underline; white-space:normal; background-position:130px 15px;}#lists :hover div{display:block; width:598px; background:#faebd7; position:absolute; left:0; top:25px; border:1px solid #888; padding-bottom:10px;}#lists :hover div.pos2 {background:#f0f5ee;}#lists .two:hover {position:relative;}#lists .single:hover {position:relative;}#lists .two:hover div.pos3 {background:#f5eef0; width:300px;}#lists .single:hover div.pos4 {background:#ffefd5; width:150px;}#lists :hover div dl {display:inline; padding:0; margin:0 10px 10px 10px; float:left; width:179px;}#lists :hover div dl dt {width:179px; background:#888; text-indent:10px; margin:5px 0 10px 0; text-decoration:none; height:20px; line-height:20px;}#lists .two:hover div {left:-150px;}#lists .two:hover div dl {width:129px;}#lists .two:hover div dl dt {width:129px;}#lists .single:hover div dl {width:129px;}#lists .single:hover div dl dt {width:129px;}#lists :hover div dl dd {padding:0; margin:0;}#lists :hover div dt a {text-decoration:none; cursor:default; font-weight:normal; color:#fff;}#lists :hover div dd a {display:block; text-decoration:none; font-weight:normal; font-size:11px; color:#000; text-indent:10px; line-height:15px;}#lists :hover div dd a:hover {text-decoration:underline;}#lists .clear {clear:both;}</style><body><ul id="lists"><li>美国站导航<div class="pos1"><dl><dt>Group one</dt><dd>Alabama</dd><dd>Alaska</dd></dl><dl><dt>Group two</dt><dd>Delaware</dd><dd>Florida</dd></dl><dl><dt>Group three</dt><dd>Louisiana</dd><dd>Maine</dd></dl><br class="clear" /><dl><dt>Group four</dt><dd>Nebraska</dd><dd>Nevada</dd></dl><dl><dt>Group five</dt><dd>North Dakota</dd><dd>Ohio</dd></dl><dl><dt>Group six</dt><dd>Tennessee</dd><dd>Texas</dd></dl></div></li><li>英国站导航<div class="pos2"><dl><dt>Group one</dt><dd>Aberdeenshire</dd><dd>Anglesey</dd></dl><dl><dt>Group two</dt><dd>Bedfordshire</dd><dd>Berkshire</dd></dl><dl><dt>Group three</dt><dd>Cardiganshire</dd><dd>Cheshire</dd></dl><br class="clear" /><dl><dt>Group four</dt><dd>Devon</dd><dd>Down</dd></dl><dl><dt>Group five</dt><dd>Fife</dd><dd>Glamorgan</dd></dl><dl><dt>Group six</dt><dd>Kent</dd><dd>Kinross</dd></dl><br class="clear" /><dl><dt>Group seven</dt><dd>Merioneth</dd><dd>Midlothian</dd></dl><dl><dt>Group eight</dt><dd>Northumberland</dd><dd>Orkney</dd></dl><dl><dt>Group nine</dt><dd>Ross-shire</dd><dd>Rutland</dd></dl><br class="clear" /><dl><dt>Group ten</dt><dd>Suffolk</dd><dd>Sussex</dd></dl><dl><dt>Group eleven</dt><dd>Wiltshire</dd><dd>Yorkshire</dd></dl></div></li><li class="single">国际站点链接<div class="pos4"><dl><dt>CSS Showcase</dt><dd>源码俱乐部</dd><dd>新浪</dd></dl><dl><dt>CSS Navigation</dt><dd>百度</dd></dl></div></li><li class="two">数码相机产品<div class="pos3"><dl><dt>Nikon</dt><dd>Digital D2Xs</dd><dd>Digital D2Hs</dd></dl><dl><dt>Canon</dt><dd>Digital IXUS</dd><dd>Digital EOS-5D</dd></dl><dl><dt>Pentax</dt><dd>Optio A30</dd><dd>Optio S7</dd></dl></div></li></ul></body></html>

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

下一篇：一个可以伸展打开的滑动导航栏