<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title> <style> *{ margin:0px; padding:0px; } .page { width:100%; height:100%; } .nav { width:160px; height:205px; position: fixed; left: 0; top: 50%; margin-top: -103px; } .nav-li { width: 160px; height: auto; color: #FFF; line-height: 40px; background: #333; text-align: center; font-size: 16px; border-bottom:1px solid #FFF; cursor: pointer; } .tit { width: 160px; height: 40px; } .nav-li:hover ul { display: block; } .nav-li ul { width: 160px; height: auto; background: #FFFFFF; display: none; } .nav-li ul li { width: 160px; height: 40px; border-bottom:1px dashed #666; color: #333; text-align: center; line-height: 40px; position: relative; } .nav-li ul li:hover .list-3 { display: block; } .list-3 { width: 160px; height: auto; position: absolute; left: 160px; top: 0px; display: none; } .list-3Dom { width: 160px; height: 40px; background: #444; border-bottom:1px dashed #666; color: #FFF; text-align: center; line-height: 40px; } </style></head><body> <div class="page"> <div class="nav"> <div class="nav-li"> <div class="tit">慕课网的标题(一)</div> <ul> <li> 二级栏目 <div class="list-3"> <div class="list-3Dom">三级栏目</div> <div class="list-3Dom">三级栏目</div> <div class="list-3Dom">三级栏目</div> </div> </li> <li> 二级栏目 <div class="list-3"> <div class="list-3Dom">三级栏目</div> <div class="list-3Dom">三级栏目</div> <div class="list-3Dom">三级栏目</div> </div> </li> <li> 二级栏目 <div class="list-3"> <div class="list-3Dom">三级栏目</div> <div class="list-3Dom">三级栏目</div> <div class="list-3Dom">三级栏目</div> </div> </li> </ul> </div> <div class="nav-li"> <div class="tit">慕课网的标题(二)</div> <ul> <li> 二级栏目 <div class="list-3"> <div class="list-3Dom">三级栏目</div> <div class="list-3Dom">三级栏目</div> <div class="list-3Dom">三级栏目</div> </div> </li> <li> 二级栏目 <div class="list-3"> <div class="list-3Dom">三级栏目</div> <div class="list-3Dom">三级栏目</div> <div class="list-3Dom">三级栏目</div> </div> </li> <li> 二级栏目 <div class="list-3"> <div class="list-3Dom">三级栏目</div> <div class="list-3Dom">三级栏目</div> <div class="list-3Dom">三级栏目</div> </div> </li> </ul> </div> <div class="nav-li"> <div class="tit">慕课网的标题(三)</div> <ul> <li> 二级栏目 <div class="list-3"> <div class="list-3Dom">三级栏目</div> <div class="list-3Dom">三级栏目</div> <div class="list-3Dom">三级栏目</div> </div> </li> <li> 二级栏目 <div class="list-3"> <div class="list-3Dom">三级栏目</div> <div class="list-3Dom">三级栏目</div> <div class="list-3Dom">三级栏目</div> </div> </li> <li> 二级栏目 <div class="list-3"> <div class="list-3Dom">三级栏目</div> <div class="list-3Dom">三级栏目</div> <div class="list-3Dom">三级栏目</div> </div> </li> </ul> </div> <div class="nav-li"> </div> </div></body></html>
效果图：
笔记
鼠标指向导航栏1级出现2级时： 1级:hover 2级{ display:block; } 2级{ display:none; }