HTML怎样制作二级下拉菜单

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

操作方法

  • 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

    附上源代码哦! <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> *{ 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; } </style> </head> <body> <div id="icon"> <p>头像</p> <ul> <li>个人中心</li> <li>我的收入</li> <li>消息</li> <li>退出登录</li> </ul> </div> </body> <script> var icon=document.getElementById("icon"); var oul=document.getElementsByTagName("ul")[0]; icon.onmouseover=function(){ oul.style.display="block"; } icon.onmouseout=function(){ oul.style.display="none"; } </script> </html>

(0)

相关推荐

  • 如何使用Excel表格制作二级下拉菜单

    下面Word联盟就为大家提高三种 制作二级下拉菜单全步骤。 第一种制作二级下拉菜单方法:使用Excel函数INDIRECT 看看例子 很明显,我们希望在一级选择机房故障,那么二级就出现他下面的列表。 ...

  • Excel表格制作二级下拉菜单全步骤

    通过2级菜单,倒是可以比较深入熟悉 INDIRECT, INDEX, OFFSET, 这三个函数,是你要想学excel函数,估计你肯定过的关。 在论坛里看帖子,有一点比较累,很多都是直接用excel文 ...

  • EXCEL制作二级下拉菜单的方法

    EXCEL制作二级下拉菜单的方法 如图所示,在A2单元格输入财务部,B2姓名下拉菜单只显示财务部下方的员工,如果A2输入行政部,在B2单元格下拉菜单只显示行政部下方的员工姓名. 步骤1:首先选中我们需 ...

  • HTML网页怎样制作二级下拉菜单,二级滑动菜单

    很多小可爱自学了HTML网页之后,也想做一些交互特效,比如二级下拉菜单,鼠标经过下滑菜单等,今天小编我就来分享一下HTML网页二级下拉菜单,小编我用jQuery来写的二级下拉菜单,挺简单的. 操作方法 ...

  • wps二级联动下拉列表怎么实现(wps制作二级下拉菜单)

    实例.将下面的一级类目和二级类目做成一个二级联动的下拉菜单.首先我们先选中左边的数据,然后在WPS上方找到[公式],再找到[指定],在弹出的输入框中我们勾选[首行],点击确定.然后在WPS上方[数据] ...

  • word2007二级下拉菜单怎么做

    我们知道excel中可以制作耳机下拉菜单,但其实在word中也可以制作二级下拉菜单,具体步骤是什么呢?下面就跟着小编一起来看看吧. 首先,打开word,设置把"开发工具"功能选项显 ...

  • WPS表格怎么添加二级下拉菜单? WPS表格添加下拉菜单的教程

    wps中想要设计一个二级下拉菜单,该怎么制作二级下拉菜单呢?下面我们就来看看详细的教程. 1.首先,点击打开表格文件,输入需要设置为下拉列表的各项文字.选择菜单栏的公式,在属性栏点击 指定 按钮 2. ...

  • EXCEL/WPS中二级下拉菜单的制作方法

    表格制作时有时需要做一些下拉菜单,这样工作效率才会提高,方便.而二级下拉菜单是如何制作的呢?下面我给大家介绍一下. 操作方法 01 列出数据源,把你所需要的菜单选项分类列出来. 02 在公式栏里找到, ...

  • CSS技巧分享:如何用css制作横排二级下拉菜单

    看到网站的导航按钮很炫酷不会怎么办?本片教程介绍如何使用css制作网站导航横排二级下拉菜单 操作方法 01 打开Notepad++,先输入个页面框架 <!DOCTYPE html> < ...