css实现三级导航菜单联动 2020-05-14 在线代码 738 <style type="text/css"> * { margin:0; padding:0; } .content { width:100%; height:auto; } .nav { width:200px; height:auto; margin-left:10%; } .nav-li { width:200px; height:auto; font-size:16px; background:black; color:white; line-height:40px; text-align:center; cursor:pointer; } .title { width:200px; height:40px; border-bottom:1px solid #fff; } .nav:hover ul { display:block; /*当鼠标放到一级级栏目时，显示二级栏目*/ } .nav ul { width:200px; height:auto; display:none; /*隐藏二级栏目*/ } .nav ul li { width:200px; text-align:center; list-style:none; height:40px; line-height:40px; color:black; background:#fff; border:1px dashed #ececec; position:relative; } .nav ul li:hover .list-3 { display:block; /*当鼠标放到二级栏目时，显示三级栏目*/ } .list-3 { width:200px; height:auto; position:absolute; left:200px; top:0; display:none; /*隐藏三级栏目*/ } .list-demo { width:200px; height:40px; text-align:center; list-style:none; color:black; background:#fff; border:1px solid #ececec; } </style> <div class="content"> <div class="nav"> <div class="nav-li"> <div class="title">数码</div> <ul> <li>手机 <div class="list-3"> <div class="list-demo">小米</div> <div class="list-demo">华为</div> <div class="list-demo">iPhone</div> </div> </li> <li>电脑 <div class="list-3"> <div class="list-demo">MacBook</div> <div class="list-demo">华硕</div> <div class="list-demo">戴尔</div> </div> </li> <li>照相机 <div class="list-3"> <div class="list-demo">佳能</div> <div class="list-demo">尼康</div> <div class="list-demo">索尼</div> </div> </li> </ul> </div> </div> <div class="nav"> <div class="nav-li"> <div class="title">数码</div> <ul> <li>手机 <div class="list-3"> <div class="list-demo">小米</div> <div class="list-demo">华为</div> <div class="list-demo">iPhone</div> </div> </li> <li>电脑 <div class="list-3"> <div class="list-demo">MacBook</div> <div class="list-demo">华硕</div> <div class="list-demo">戴尔</div> </div> </li> <li>照相机 <div class="list-3"> <div class="list-demo">佳能</div> <div class="list-demo">尼康</div> <div class="list-demo">索尼</div> </div> </li> </ul> </div> </div> <div class="nav"> <div class="nav-li"> <div class="title">数码</div> <ul> <li>手机 <div class="list-3"> <div class="list-demo">小米</div> <div class="list-demo">华为</div> <div class="list-demo">iPhone</div> </div> </li> <li>电脑 <div class="list-3"> <div class="list-demo">MacBook</div> <div class="list-demo">华硕</div> <div class="list-demo">戴尔</div> </div> </li> <li>照相机 <div class="list-3"> <div class="list-demo">佳能</div> <div class="list-demo">尼康</div> <div class="list-demo">索尼</div> </div> </li> </ul> </div> </div> </div> 在线运行 栏目 索尼 数码 尼康 0
QQ登录
评论 0