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

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

操作方法

  • 01

    如图所示，二级下拉菜单一般都是这样来制作的，就是在li标签里面再放一个ul标签。

  • 02

    然后就会有这样的效果了，不过距离二级菜单有点差距。

  • 03

    接着我们先把二级下拉菜单之间的margin和padding值去掉。

  • 04

    然后设置div>ul>li，需要注意的是，>是子代选择器。因为我们不需要全部的li左浮动。

  • 05

    如图，浮动后就成了，距离二级菜单不远了。

  • 06

    接着在设置去掉所有li的圆点符号，并且给宽高，居中以及背景色。

  • 07

    如图，这个二级菜单还算过得去，如果不喜欢可以换颜色。

  • 08

    接着我们把下面部分的菜单隐藏起来，如图，用到空格隔开，注意，空格表示后代选择器。

  • 09

    这样，下面的下拉菜单就看不见了，哈哈。

  • 10

    然后用jq来操作鼠标经过的时候，显示菜单即可。

  • 11

    如图，我用到了滑动效果，具体可以自己查找一下slideToggle的用法哦。

赞 (0)

相关推荐

  • HTML怎样制作二级下拉菜单

    网络上的各种网页,二级下拉菜单非常常见,那么HTML中怎样制作二级下拉菜单呢? 操作方法 01 如图,先书写一个div标签,并且给这个div标签添加一个id. 02 然后在div里面嵌套一个p标签,p ...

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

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

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

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

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

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

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

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

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

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

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

    wps二级联动下拉列表怎么实现（wps制作二级下拉菜单）

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

  • word2007二级下拉菜单怎么做

    word2007二级下拉菜单怎么做

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

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

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