html怎样 做二级菜单,HTML制作二级下拉菜单的方法步骤

网络上的各种网页,二级下拉菜单非常常见,那么HTML中怎样制作二级下拉菜单呢?工具/材料

hbuilder

操作方法

01

如图,先书写一个div标签,并且给这个div标签添加一个id。

02

然后在div里面嵌套一个p标签,p标签里面放置了一个主菜单“头像”。我们要做的效果就是当鼠标放在“头像”这里就会弹出下拉菜单。

03

然后我们使用*清除所有元素的margin和padding值。

04

接着我们来设置id为icon的div的样式,这里只设置宽度,高度就靠里面的下拉菜单的内容来撑开这个div的高度。

这里我就使用line-height和text-align来让文字上下左右居中,并且我还设置了border边框。

05

最后,二级菜单的主菜单做出来了。

06

接着再在之前的div标签里面嵌套ul,ul里面放置li,li里面就是我们二级下拉菜单的内容。

07

接着来预览一下效果,可以看到二级下拉菜单的左边有一些小圆点。

08

然后我们设置li标签的CSS样式为:list-style-type:none;

09

这样小圆点就会去掉,不会影响下拉菜单的美观程度。

10

我们常见的下拉菜单刚开始是看不见的,只有当鼠标放上去的时候才可以看见,所以我们要把下拉菜单先隐藏起来,这就需要设置ul的display属性为none。

11

接着书写JavaScript,获取到二级菜单所在的div,以及下拉菜单所在的ul。

12

如图,我们设置当鼠标经过icon这个div时,ul的属性变为可见状态。

13

而当鼠标离开的时候,ul就会隐藏起来,变成不可见状态,这样我们的二级下拉菜单就完成了。

14

附上源代码哦!

*{

margin: 0;

padding: 0;

}

#icon{

width: 100px;

line-height: 30px;

text-align: center;

border: 1px solid black;

margin: 100px;

}

li{

list-style-type: none;

}

ul{

display: none;

}

头像

  • 个人中心
  • 我的收入
  • 消息
  • 退出登录

var icon=document.getElementById("icon");

var oul=document.getElementsByTagName("ul")[0];

icon.οnmοuseοver=function(){

oul.style.display="block";

}

icon.οnmοuseοut=function(){

oul.style.display="none";

}

  • 1
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值