<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS隐藏列表</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .background{ background:url(IMG/mooc.png) no-repeat center top; width: 100%; height: 6632px; } .list-3 li{ background-color: orange; font-weight: bold; } li{ text-align: center; width: 150px; height: auto; border-bottom: 1px dashed #808080; background-color: #33ccff; font-weight: bold; font-family: "黑体"; padding: 3px 0px; margin:5px 0px; } .title{ background-color: #474747; font-family: "微软雅黑"; font-weight: bold; width: 150px; height: auto; text-align: center; border-bottom:solid 1px #ececec; color: white; font-weight: bolder; margin:5px 0px; } .list li{display: none;} .list:hover li{display: block;} .list-3{display: none;} .title-2:hover .list-3{display: block;} .bigdiv{ position: fixed; top: 50%; } .title-2{ position: relative; background-color: white; } .list-3{ position: absolute; left: 150px; top: -5px; } </style></head><body> <div class="background"> <div class="bigdiv"> <div class="list"> <div class="title">慕课网标题</div> <ul> <li class="title-2"> 慕课网IT学习 <div class="list-3"> <ul> <li>java</li> <li>html</li> <li>web</li> </ul> </div> </li> <li class="title-2"> 慕课网IT学习 <div class="list-3"> <ul> <li>java</li> <li>html</li> <li>web</li> </ul> </div> </li> <li class="title-2"> 慕课网IT学习 <div class="list-3"> <ul> <li>java</li> <li>html</li> <li>web</li> </ul> </div> </li> </ul> </div> <div class="list"> <div class="title">慕课网标题</div> <ul> <li class="title-2"> 慕课网IT学习 <div class="list-3"> <ul> <li>java</li> <li>html</li> <li>web</li> </ul> </div> </li> <li class="title-2"> 慕课网IT学习 <div class="list-3"> <ul> <li>java</li> <li>html</li> <li>web</li> </ul> </div> </li> <li class="title-2"> 慕课网IT学习 <div class="list-3"> <ul> <li>java</li> <li>html</li> <li>web</li> </ul> </div> </li> </ul> </div> <div class="list"> <div class="title">慕课网标题</div> <ul> <li class="title-2"> 慕课网IT学习 <div class="list-3"> <ul> <li>java</li> <li>html</li> <li>web</li> </ul> </div> </li> <li class="title-2">慕课网IT学习 <div class="list-3"> <ul> <li>java</li> <li>html</li> <li>web</li> </ul> </div> </li> <li class="title-2"> 慕课网IT学习 <div class="list-3"> <ul> <li>java</li> <li>html</li> <li>web</li> </ul> </div> </li> </ul> </div> </div> </div></html>
1 回答
- 1 回答
- 0 关注
- 2480 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消