CSS 折疊的菜單實(shí)現(xiàn)代碼

2024-07-11 08:45:30

字體：大中小

供稿：網(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實(shí)現(xiàn)折疊的菜單</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="#">    <h1>武林網(wǎng)</h1> <span>為您提供精品源代碼、網(wǎng)頁(yè)特效代碼等。</span></a></li>   </li>   <li><a href="#">    <h1>精品特效</h1> <span>精品特應(yīng)有盡有</span></a></li>   </li>   <li><a href="#">    <h1>我是傳奇</h1> <span>這里是內(nèi)容</span></a></li>   </li>   <li><a href="#">    <h1>這是折疊標(biāo)簽</h1> <span>這里是內(nèi)容</span></a></li>   </li></body></html>

提示：您可以先修改部分代碼再運(yùn)行

上一篇：css 自動(dòng)換行強(qiáng)制換行屬性 (firefox+ie)

下一篇：關(guān)于html元素的 width屬性無(wú)效果的解決方法