HTML简单实现二级菜单栏(看了基本会)

菜单栏就是所谓的正常状态看不到二级和三级菜单,当你移鼠标到指定的位置后显示出来,因此,实现二级菜单栏只需要两行css代码就可以了。以下是未添加任何特效的效果图
在这里插入图片描述

1、打开写网页代码的软件,并新建一个html网页文件,在body里写上html代码:
<body>

<div class="a">

<ul>

<li>

<a href="#">一级</a>

<ul class="d">

<li><a href="#">二级</a></li>

<li><a href="#">二级</a></li>

</ul>

</li>

</ul>

</div>

</body>
2、在里写上css代码:
<style type="text/css">

.a ul li ul{

display: none;/*将 二级 菜单隐藏起来*/

}

.a ul li:hover ul{

display: block;/*当鼠标移动到一级标签后,ul即二级菜单显示出来*/

}

    </style>
3、保存运行后如图,当鼠标放上一级菜单后显示二级出来,完成全部步骤

在这里插入图片描述

  • 15
    点赞
  • 75
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
实现二级菜单栏,可以使用JavaScript和CSS结合来实现。以下是一个简单的示例代码: HTML代码: ``` <nav> <ul> <li><a href="#">一级菜单1</a> <ul> <li><a href="#">二级菜单1</a></li> <li><a href="#">二级菜单2</a></li> <li><a href="#">二级菜单3</a></li> </ul> </li> <li><a href="#">一级菜单2</a> <ul> <li><a href="#">二级菜单1</a></li> <li><a href="#">二级菜单2</a></li> </ul> </li> <li><a href="#">一级菜单3</a></li> </ul> </nav> ``` CSS代码: ``` nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; position: relative; } nav ul ul { display: none; position: absolute; top: 100%; left: 0; background-color: #fff; padding: 0; margin: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } nav ul li:hover > ul { display: inherit; } nav ul ul li { display: block; float: none; } nav ul ul li a { color: #333; padding: 10px; text-decoration: none; display: block; } nav ul li a { color: #fff; display: block; padding: 10px; text-decoration: none; } nav ul li:hover { background-color: #555; } nav ul li:hover a { color: #fff; } ``` JavaScript代码: ``` var dropdown = document.getElementsByTagName('li'); for (var i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener('mouseover', function() { this.classList.add('show'); }); dropdown[i].addEventListener('mouseout', function() { this.classList.remove('show'); }); } ``` 通过上述代码,可以实现一个带有二级菜单栏的网页导航栏,鼠标移到一级菜单上时,二级菜单显示出来。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宾有为

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值