通过CSS实现隐藏下拉菜单鼠标经过伸展的方式

文章目录

最近在学习过程中,遇到一个问题,设计导航栏的时候,经常会有隐藏的二级菜单,鼠标经过的时候弹出。鉴于尚未学习JS的我,还无法用高级的js来实现此功能,于是通过百度搜索,了解到了纯CSS实现的方法,并写此博文进行记录,加深记忆。

想实现的效果

鼠标移动到WP主题的时候,跳出下级蓝色菜单,此下级我已经经过定位处理。

CSS实现方法:

首先用display:none;来隐藏掉下级菜单,然后设置该下级菜单上级的li元素的鼠标经过的样式,及样式变为:display: block; 这里我可能表达不清,具体看以下代码:

<ul>
    <li>1级</li>
    <li>1级</li>
    <li class="nav-1">1级
        <ul class="nav-2">
            <li>二级</li>
        </ul>
    </li>
</ul>
<style>
    .nav-2 {
        display: none;
        /*先隐藏二级*/
    }
    
    .nav-1:hover .nav-2 {
        display: block;
        /*然后设置鼠标经过取消隐藏*/
    }
</style>

其实这里的意思就是先隐藏,然后鼠标经过显示,非常简单。难点在于应该设置哪个class经过?思考并学习中..

原文链接:,转发请注明来源!