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";
}
html怎样 做二级菜单,HTML制作二级下拉菜单的方法步骤相关推荐
- html下拉菜单制作方法,CSS3制作Dropdown下拉菜单的方法
:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id="comment"的位置,俗 ...
- css表格中下拉菜单怎么设置,css如何实现下拉菜单？css实现下拉菜单的方法（完整代码）...
本篇文章给大家带来的内容是关于css如何实现下拉菜单?css实现下拉菜单的方法(完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. /*盒子,相对定位*/ .dropdown{ ...
- css下拉菜单样式_CSS样式下拉菜单
css下拉菜单样式 Introduction: 介绍: As we all know that the styling website or web pages are an important as ...
- css3如何写下拉菜单,css如何实现下拉菜单 超详细
首页 >web前端>css教程>正文 css如何实现下拉菜单?css实现下拉菜单的方法(完整代码) 原创2019-04- 本篇文章给大家带来的内容是关于css如何实现下拉菜单?css ...
- excel下拉菜单vba_在Excel下拉菜单中删除使用过的项目
excel下拉菜单vba There is a new sample file on my Contextures web site, which lets you pick players for ...
- 点击下拉菜单以外区域，下拉菜单收起
点击下拉菜单以外区域,下拉菜单收起 网页中下拉菜单随处可见,一般用到toggle()或slideToggle()事件:但下拉菜单出来后,一般要再次点击原来的按钮才能收起,所以做到下拉菜单以外点击收起, ...
- 微信截取下拉菜单图片时，下拉菜单总是消失，无法成功截取
问题描述: 微信截取下拉菜单图片时,下拉菜单总是消失,无法成功截取 原因分析: 在下拉框弹出后按Alt键,会自动收回下拉框,而微信默认的截屏快捷键刚好是Alt+A的组合,因此无法使用默认快捷键对下拉框 ...
- 纯css制作三级下拉菜单
css本身的功能就挺强大的,尤其是css3出来之后,大部分特效只用css3就能完成了,无需再费心思去想js怎么怎么做jQuery怎么怎么做,代码简洁质量轻巧.下面是本人用纯css制作的三级下拉菜单效果 ...
- php excel多级下拉菜单自动匹配,Excel下拉菜单怎么做 多级联动+自动匹配教程
Excel一直是近年来办公室工作中的必要软件之一,这个软件功能非常强大,如果你只学会了皮毛那就有些可惜了,而Excel隐藏了许多许多的小技巧.今天UU为大家带来的是Excel下拉菜单怎么做,其中包括多 ...
- excel表格内容拆分_Excel表格中制作动态下拉菜单的方法，学会了菜单内容想加就加...
To do list heading 在我们日常工作中,利用下拉菜单选择输入,不仅对单元格输入内容进行限制,关键是省去打字的麻烦,点点鼠标就完成输入了.通常情况下,我们是通过通过数据验证(数据有效性) ...
最新文章
- swif 在字符串中查找特定字符索引以及改变字符串的指定位置的颜色 字体大小
- leetcode 203 Remove Linked List Elements
- Oracle 10g RAC修改IP/VIP地址示例
- 在应用程序中替换Linux中Glibc的malloc的四种方法
- 成功解决A value is trying to be set on a copy of a slice from a DataFrame. Try using .loc[row_indexer,co
- 高性能、低成本的高防 IP 产品能现实吗？
- Spring Cloud构建微服务架构：服务容错保护（Hystrix依赖隔离）【Dalston版】
- Java数据库篇9——备份与还原、忘记密码
- Qt creator5.7 OpenCV249之图片膨化(含源码下载)
- 信息学奥赛C++语言：推销产品
- Android java传递int类型数组给C
- struts2 中的 addActionError 、addFieldError、addActionMessage方法的区别添加错误信息
- xcode经验汇总（持续更新中）
- html面试信息登记表
- 卫星控制类操作系统VAX/VMS简介
- 同时使用动态库和静态库时怎么写makefile
- 红帽子linux编译命令,Linux REDHAT下安装内核源代码详细步骤教程
- YOLOv5电车识别 电瓶车识别
- 《Word2vec》1 模型的引入介绍与相关概念
- Java-设计模式之单例模式