css制作二级下拉导航时,鼠标放上,隐藏的导航不会停留!
七娃博客259 次
补一个坑,之前一直写css二级导航时,鼠标经过顶部菜单,隐藏的二级导航会显示出来,而且鼠标移初顶部导航并移入二级导航时,隐藏导航不应该立即消失,而是要继续显示!
看如下布局的html及css代码:
<li> <a href="#">联通</a> <ul class="nav_ul_ul"> <li>电信</li> <li>联通</li> <li>移动</li> </ul> </li>
css代码如下:
li a:hover ~ ul{display:block;}
这样的话,就会出现我们开始说的bug,鼠标移出,ul里面的内容立马跟着不显示了,要是用户想点击里面的“移动”,根本点击不到,那么怎么解决呢?继续看
解决办法:
鼠标经过,隐藏和显示外边的盒子元素就会出现这个问题,那么将需要隐藏显示的模块,放到“a”元素里面,变成a的子元素,或者将css改为经过li时,模块显示,代码如下:
方法一:
<li> <a href="#">联通 <ul class="nav_ul_ul"> <li>电信</li> <li>联通</li> <li>移动</li> </ul> </a> </li>
方法二:
li:hover a ul{display:block;}
这样就能完整的实现一个二级的导航了!
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。
转载请注明来源:css制作二级下拉导航时,鼠标放上,隐藏的导航不会停留! - Qui-Note
评论 | 0 条评论