起风网一，三级联动类目
代码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三级联动</title> <style> .nav { width: 160px; height: auto; position: fixed; left: 20px; top: 20px; margin-top: 0; } .nav-li { width: 100%; height: auto; border-bottom: 1px solid #fff; text-align: center; line-height: 40px; background: #333; color: white; font-size: 16px; } .tit { width: 100%; height: 40px; } .nav-li:hover ul { display: block; } .nav-li ul { width: 100%; height: auto; background: gray; list-style-type: none; padding: 0; margin: 0; display: none; } .nav-li ul li { width: 100%; height: 40px; line-height: 40px; border-bottom: 1px dashed #666; color: #333333; text-align: center; position: relative; } /* 三级目录*/ .nav-li ul li:hover .list3 { display: block; } .list3 { width: 160px; height: auto; position: absolute; left: 160px; top: 0; display: none; } .list3-item { background: gold; } </style></head><body><div class="nav"> <div class="nav-li"> <div class="tit">一级类目1</div> <ul> <li> 二级栏目1 <div class="list3"> <div class="list3-item">三级目录1-1</div> <div class="list3-item">三级目录1-2</div> <div class="list3-item">三级目录1-3</div> </div> </li> <li>二级栏目2 <div class="list3"> <div class="list3-item">三级目录2-1</div> <div class="list3-item">三级目录2-2</div> <div class="list3-item">三级目录2-3</div> </div> </li> <li>二级栏目3 <div class="list3"> <div class="list3-item">三级目录3-1</div> <div class="list3-item">三级目录3-2</div> <div class="list3-item">三级目录3-3</div> </div> </li> </ul> </div> <div class="nav-li"> <div class="tit">一级类目2</div> <ul> <li>二级栏目2-1</li> <li>二级栏目2-2</li> <li>二级栏目2-3</li> </ul> </div> <div class="nav-li"> <div class="tit">一级类目3</div> <ul> <li>二级栏目3-1</li> <li>二级栏目3-2</li> <li>二级栏目3-3</li> </ul> </div></div></body></html>文章转载于:https://www.jianshu.com/p/16f87fe66b3f
原著是一个有趣的人,若有侵权,请通知删除
评论前必须登录！
立即登录