纯CSS鼠标hover下拉二级菜单栏

作者:神奇的周 | 创建时间: 2023-06-08
本针对不会使用Javascript来时实现二级下拉菜单效果的的同学,通过Css的伪类属性hover可以实现鼠标hover状态 下,出现下拉实现二级菜单的功能;css很简单,为了更容易的让同学理解,主要分享思路,少代码,以免分不清。...
纯CSS鼠标hover下拉二级菜单栏

操作方法

写出HTML内容为:<ul class="L1"><li><a href="#">菜单</a><ul class="L2"></li><a href="#"></a></li></ul>

ul.L1下的li为一级菜单,在导航中需要显示的,L1下的ul.L2为下拉菜单内容;了解这个就好理解了。

正常情况下,我们要让L2不显示,隐藏起来,所以给.L2 li{display:none}的样式,y隐藏。

当鼠标放到菜单上也就是L1上的时候,L2显示出来也就是display:block,如何实现?.L1 li:hover ul.L2 li{display:block},此段css的意思就是放到菜单上L2显示出来

最后需要给L2添加一些好看的css样式,让下拉菜单更好看一些

如果想让下拉菜单有延时效果,更逼真;那就在jQuery下写入如下延时效果 $('nav li').hover(  function() {    $('ul', this).stop().slideDown(200);  },  function() {    $('ul', this).stop().slideUp(200);  } );

温馨提示

有一定的css基础
注意JS代码必须要放在jQuery下使用
点击展开全文

更多推荐