純CSS豎向滑動(dòng)展開(kāi)折疊菜單_菜單導(dǎo)航特效

純CSS豎向滑動(dòng)可折疊菜單，確實(shí)不錯(cuò)的哦，兼容性良好，不管是學(xué)習(xí)或是使用，都要看看，代碼簡(jiǎn)潔。CSS中預(yù)留有菜單背景圖片的位置，你可以試著換換他的背景，效果會(huì)更漂亮。

<!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" mrc="text/html; charset=gb2312" />
<title>純CSS豎向滑動(dòng)可折疊菜單-www.hl5o.cn</title>
<style type="text/css">
#dlmenu {height:10em;}
#menu {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:15em; background:#fff; z-index:100;}
#menu li {display:block; padding:0; margin:0; position:relative; z-index:100;}
#menu li a, #menu li a:visited {display:block; text-decoration:none;}
#menu li dd {display:none;}/*www.hl5o.cn*/
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dt a , #menu li a:hover dt a {background:#d4d8bd url(top_grad_2.gif) center center; color:#ff0; }
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {height:15em; background:#b4be9c url(sub_grad.gif);}
#menu table {border-collapse:collapse; padding:0; margin:-4px; font-size:1em;}
#menu dl {width: 15em; margin: 0; background: #6f9c6f; cursor:pointer;}
#menu dt {margin:0; padding: 0; font-size: 1.1em; border-top:1px solid #cce;}
#menu dd {margin:0; padding:0; font-size: 1em; text-align:left; }/*www.hl5o.cn*/
.gallery dt a, .gallery dt a:visited {display:block; color:#fff; padding:5px 5px 5px 10px; background:#949e7c url(top_grad.gif) center center;}
.gallery dd a, .gallery dd a:visited {color:#000; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 20px; background:#b4be9c url(sub_grad.gif);}
* html .gallery dd a, * html .gallery dd a:visited {height:1em;}
.gallery dd a:hover {background:#7aa; color:#ff0;}
*www.hl5o.cn*/
</style>
</head>
<body>

<div id="dlmenu">
<ul id="menu">
<li>

<dl class="gallery">
	<dt><a href="/">模板無(wú)憂(yōu)</a></dt>
	<dd><a href="/" title="The zero dollar ads page">模板無(wú)憂(yōu)</a></dd>
</dl>

</li>
<li>

<dl class="gallery">
	<dt><a href="/jscss/">網(wǎng)頁(yè)殊效</a></dt>
	<dd><a href="/" title="常用網(wǎng)頁(yè)代碼">菜單導(dǎo)航</a></dd>
</dl>

</li>
<li>

<dl class="gallery">
	<dt><a href="/">編程資料</a></dt>
	<dd><a href="/" title="Cross browser fixed layout">控件組件</a></dd>
	<dd><a href="/" title="Cross browser fixed layout">Delphi源碼</a></dd>
</dl>

</li>
<li>

<dl class="gallery">
	<dt><a href="/">關(guān)于我們</a></dt>
	<dd><a href="/" title="A drop down menu">mb5u.com</a></dd>
	<dd><a href="/" title="A cascading menu">Jscss</a></dd>
</dl>

</li>
</ul>
</div>
</body>
</html>

所屬頻道：菜單導(dǎo)航特效/更新時(shí)間：2012-10-25

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)菜單導(dǎo)航特效：

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁(yè)鏈接| 搜索純CSS豎向滑動(dòng)展開(kāi)折疊菜單
特效說(shuō)明：
菜單導(dǎo)航模板-純CSS豎向滑動(dòng)展開(kāi)折疊菜單。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

純CSS豎向滑動(dòng)展開(kāi)折疊菜單_菜單導(dǎo)航特效

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些