css制作二级下拉导航时,鼠标放上,隐藏的导航不会停留!

补一个坑,之前一直写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;}

这样就能完整的实现一个二级的导航了!

赞(0) 打赏
未经允许不得转载:版权所有@七娃设计室七娃博客 » css制作二级下拉导航时,鼠标放上,隐藏的导航不会停留!
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

七娃设计,让设计贴近生活

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏