您當前位置：首頁 > web前端 > htmlcss > CSS實現(xiàn)鼠標觸發(fā)展開折疊的精美菜單

CSS實現(xiàn)鼠標觸發(fā)展開折疊的精美菜單

來源：程序員人生發(fā)布時間：2014-01-31 16:15:05 閱讀次數(shù)：2729次

　　網(wǎng)(LieHuo.Net)教程這個是用純CSS鼠標觸發(fā)展開折疊的精美菜單代碼，暖色調(diào)非常漂亮哦，測試發(fā)現(xiàn)兼容性也挺好，有用的朋友先收藏一下吧。

<!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實現(xiàn)鼠標觸發(fā)展開折疊的精美菜單 - LIEHUO.NET</title><style type="text/css">#menu { overflow:hidden; background-color:#fbfef4; width:200px; height:500px; overflow:hidden;}#menu h1{margin:0px;color:#739c23; font-size:14px;}#menu li { list-style:none; display:block; width:178px; border:1px solid #739c23; border-bottom-width:0px;}#menu li .end{border-bottom-width:1px;}#menu li a{ display:block; text-decoration:none; width:100%; padding:10px;}#menu li a span{ display:none; color:#333; font-size:12px; padding:10px 0 0 0;}#menu li a:hover{ background:#fff;}#menu li a:hover span{ display:block; cursor: hand;}</style></head><body><ul id="menu"><li><a href="#" _fcksavedurl="#"><h1>站長網(wǎng)</h1><span>LIEHUO.NET為您提供站長教程、網(wǎng)頁設(shè)計、源碼資源等。</span></a></li></li><li><a href="#" _fcksavedurl="#"><h1>站長工具</h1><span>站長所需要的各類工具特應(yīng)有盡有！</span></a></li></li><li><a href="#" _fcksavedurl="#"><h1>論壇</h1><span>菜鳥級IT技術(shù)交流社區(qū)！</span></a></li></li><li><a href="#" _fcksavedurl="#"><h1>這是折疊標簽</h1><span>這里是內(nèi)容</span></a></li></li></body></html><br /><center>網(wǎng)更多教程，請訪問：<a href=http://www.vxbq.cn/ target=_blank _fcksavedurl="http://www.vxbq.cn/ target=_blank">http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運行!

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 論策系列教程：站長撰寫軟文的五大禁忌

下一篇 JavaScript 異步方法隊列鏈

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

CSS實現(xiàn)鼠標觸發(fā)展開折疊的精美菜單