为什么hover设置给.nav-li就能显示二级菜单，而设置给tit就不行，而且二级菜单都是一个class类，hover怎么知道显示的是哪个一级菜单下的二级菜单，如果这样写，不应该是当鼠标移到一个1级菜单下时，所有的二级菜单都应该被显示吗<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>position</title> <style> * { padding: 0; margin: 0; } .page { width: 100%; height: 4043px; background: url("mooc.png") center top no-repeat; } .nav { width: 160px; height: 205px; position: fixed; left: 0; top: 50%; margin-top: -103px; font-family: 'Miscrosoft YaHei'; } .nav-li { width: 160px; height: auto; border-bottom: 1px solid #FFF; background: #333; text-align: center; line-height: 40px; color: #FFF; font-size: 16px; cursor: pointer; } .tit { width: 160px; height: 40px; } .tit:hover ul { display: block; } .nav-li ul { width: 160px; height: auto; background: #FFF; 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 solid #FFF; text-align: center; line-height: 40px; color: #FFF; } </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> 二级栏目 </li> <li> 二级栏目 </li> <li> 二级栏目 </li> </ul> </div> <div class="nav-li"> <div class="tit">慕课网的标题</div> <ul> <li> 二级栏目 </li> <li> 二级栏目 </li> <li> 二级栏目 </li> </ul> </div> <div class="nav-li"> <div class="tit">慕课网的标题</div> <ul> <li> 二级栏目 </li> <li> 二级栏目 </li> <li> 二级栏目 </li> </ul> </div> <div class="nav-li"> <div class="tit">慕课网的标题</div> <ul> <li> 二级栏目 </li> <li> 二级栏目 </li> <li> 二级栏目 </li> </ul> </div> </div> </div></body></html>
3 回答
奋斗好青年
TA贡献69条经验 获得超30个赞
首页你要理解hover的含义先,hover样式写肯定是对于下一层,因为你的tit跟二级菜单是同级的关系,用css去写hover肯定是实现不了的,如果你一定要tit可以借助js去写呀
- 3 回答
- 0 关注
- 1186 浏览
添加回答
举报
0/150
提交
取消