滑出浮動層的CSS大塊導(dǎo)航菜單

2024-09-05 12:20:04

字體：大中小

供稿：網(wǎng)友

不知道該如何形容這種菜單，好像在微軟以及Dell的網(wǎng)站導(dǎo)航地圖里見到過，每一個菜單分類就可以細分和重新布局，顯得很大氣，簡約但給你很清新的感覺。
　　最上一行的是菜單總導(dǎo)航，當我們把鼠標放上的時候，會顯出該菜單的二級分類，你可以進行重新排版，甚至加入圖片也可以，本菜單可以廣泛應(yīng)用到產(chǎn)品一類的網(wǎng)站。

<!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大塊導(dǎo)航菜單</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>美國站導(dǎo)航<div   id="iwvjtn8m0"   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>英國站導(dǎo)航<div   id="iwvjtn8m0"   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 id="iwvjtn8m0"    class="single">國際站點鏈接<div   id="iwvjtn8m0"   class="pos4"><dl><dt>CSS Showcase</dt><dd>源碼俱樂部</dd><dd>新浪</dd></dl><dl><dt>CSS Navigation</dt><dd>百度</dd></dl></div></li><li id="iwvjtn8m0"    class="two">數(shù)碼相機產(chǎn)品<div   id="iwvjtn8m0"   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網(wǎng)站的二級滑動菜單

下一篇：一個可以伸展打開的滑動導(dǎo)航欄