<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> <style type="text/css"> #parent >li> span{background: #0c9399;display: block;width: 200px;} li {line-height: 50px;display: block;} li>ul{display: none;} #parent span:hover + ul{display: block;color: darkred} </style> </head> <body> <ul id="parent"> <li> <span><p></p>列表一</span> <ul> <li>子列表</li> <li>子列表</li> <li>子列表</li> </ul> </li> <li> <span><p></p>列表二</span> <ul> <li>子列表</li> <li>子列表</li> <li>子列表</li> </ul> </li> <li> <span><p></p>列表三</span> <ul> <li>子列表</li> <li>子列表</li> <li>子列表</li> </ul> </li> </ul> </body> </html>
摺疊面板，類似於二級目錄的效果，純css編寫
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
四種方案實現CSS兩欄佈局
實現兩欄佈局：左側定寬，右側自適應 html： <html> <head> </head> <body> <div class="container"> <div class="left">LEFT