div+css制作导航下拉菜单

div+css制作导航下拉菜单

操作方法

  • 01

    首先看如下代码：

  • 02

    预览效果：

  • 03

    新增如下代码：

  • 04

    预览效果如下：

  • 05

    发现样式乱了，这是因为新增的li继承了原本的 Float：left; 新增代码如下：

  • 06

    预览效果图：

  • 07

    现在把下拉列表的背景图片去掉，并增加Hover样式

  • 08

    预览效果如下：

  • 09

    现在基本实现了下拉效果，接下来就是要实现当鼠标移动到一级菜单上的时候，显示二级菜单，当鼠标移开一级菜单的时候，隐藏二级菜单，这需要CSS和JS双重来控制。 看如下代码：

  • 10

    代码解释： 首先隐藏二级菜单的Ul  #menu ul li ul{ display:none;  width:154px;} 设置一个一级菜单li的listshow 下的二级菜单的样式为显示：#menu ul li.listshow ul{ display:block;} 这样就给了二级菜单两个状态，默认情况下隐藏，当一级菜单有样式listshow的时候，二级菜单显示。 至于这两种状态的切换就是JS代码的控制。 JS代码解读（从上到下每行解读）： 首先定义一个函数：menuFix 函数内部定义变量 sfEles 为获取的一级菜单项。 因为一级菜单有多个，所以循环每个菜单，sfEles[i]代表循环到的每个菜单项，例如 java菜单 每个菜单项设置两个状态onmouseover onmouseout 即鼠标移动到菜单上和鼠标移开的两个状态。 在每个状态中设置菜单项（即一级菜单li）的class. 最终效果：

赞 (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怎么制作表格下拉菜单?

    我们在应用EXCEL表格的时候,通长会输入很多重复的数据,为了快速.方便的应用数据,我们可以通过制作下拉菜单来实现,那么怎么样制作下拉菜单呢?下面小编就为大家详细介绍一下,来看看吧! 步骤 打开Exc ...

  • Excel怎么利用数据有效性制作多级下拉菜单?

    Excel中经常用到多级下拉菜单,而下拉菜单的制作需要使用到excel的定义名称+数据有效性+indirect函数,本文旨在介绍如何制作多级下拉菜单.以下为excel实用技巧的系列链接. 1.认识下拉 ...

  • 怎么在Excel中制作一级下拉菜单选项

    怎么在Excel中制作一级下拉菜单选项

    有的小伙伴在使用Excel软件录入大量数据时,为了方便录入,也为了精确录入,因此想要使用一级下拉菜单选项,但是却不知道如何制作,那么小编就来为大家介绍一下吧.方法一1. 第一步,双击或者右击打开需要录 ...

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

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

  • 制作excel下拉菜单

    excel功能实在是太多了，在制作表格中，如果序号太多了，一直排到下面，今天教你如何制作下拉菜单，缩短格式。 第一步：打开excel2010，以次选择“数据”项下方“数据有效性”如下图例： 第二步：在 ...