设置下拉菜单的几种方法

一、设置display: none; hover的时候display: block;

例如：

  <style>.test{width: 50px;height: 50px;}</style>
</head>
<body><ol><li><a href="#">TestTestTestTestTestTestTest</a><div class="test">这是一个测试</div></li><li><a href="#">TestTestTestTestTestTestTest</a></li></ol>
</body>

如果要让div实现下拉效果可以设置元素隐藏，在hover <li> 标签的时候显示div即可

    .test{width: 50px;height: 50px;display: none;}li:hover>.test{display: block;}

hover的时候即可显示下拉。

二、使用transition属性

使用transition属性可以给元素设置高度为0，元素内容溢出部分裁剪。

hover的时候恢复高度即可。

    .test{width: 50px;height: 0px;overflow: hidden;transition: 2s;}li:hover>.test{height: 50px;}

注意： transition: 2s; 2s指的是2秒，可以单位毫秒。

此方法可以实现下拉菜单的动画效果，另外不止是高度可以过渡，颜色，宽度都可以。

例如：

设置下拉菜单的几种方法相关推荐

java excel 数据有效性_Excel设置数据有效性实现单元格下拉菜单的3种方法
Excel设置数据有效性实现单元格下拉菜单的3种方法一.直接输入: 1.选择要设置的单元格,譬如A1单元格: 2.选择菜单栏的"数据"→"有效性"→出现&qu ...
设置数据有效性实现单元格下拉菜单的3种方法
设置数据有效性实现单元格下拉菜单的3种方法一.直接输入: 1.选择要设置的单元格,譬如A1单元格: 2.选择菜单栏的"数据"→"有效性"→出现 ...
excel表格中如何设置下拉菜单
一. 直接自定义序列用"数据/有效性"功能可以达到目的. 以选择性别为例,制作有男.女选项的下拉菜单: 选中"性别"数据区域: 执行"数据/有效性& ...
handsontable 给单元格设置下拉菜单
handsontable 可以扩展 render 和编辑功能,当然自己扩展还是很麻烦的. 默认给了这么几种单元格类型 "autocomplete" or Handsontable. ...
怎么在excel设置下拉菜单
在制作excel表格时,为了规范化表格填写的内容和填写人员的方便,我们需要在excel设置下拉菜单,以便于更好的管理.统计表格,分享一个怎么在excel设置下拉菜单方法. 1.打开excel表格,在这 ...
excel添加列下拉框票价_如何在excel中设置下拉菜单
excel是日常办公中应用非常多的办公软件之一,其强大的数据统计.分析功能为工作带来不少方便.在EXCEL中设置下拉菜单,以方便输入相同内容.本文就以将性别设置为下拉菜单为例,介绍在excel中设置下 ...
下拉菜单的四种实现方式
今日在做下拉菜单时思考实现下拉菜单的几种实现方式,现在对这几种实现方式进行总结. 1:改变下拉菜单的display /*HTML结构,以下四种方法通用*/ <div id="conta ...
Java selenium操作下拉滚动条的几种方法
数据采集中,经常遇到动态加载的数据,我们经常使用selenium模拟浏览器操作,需要多次下拉刷新页面才能采集到所有的数据,就此总结了几种selenium操作下拉滚动条的几种方法我这里演示的是Java ...
在excel的单元格中设置下拉菜单
很多时候我们在编辑excel的时候,在插入相同的内容时显得比较繁琐,下面教大家在excel单元格中设置下拉菜单,直接点击后更改单元格内容..步骤如下: 1.选中一列,然后点击菜单栏"数据&q ...
excel单元格下拉选项怎么设置_表格设置下拉多个选项的方法_excel如何设置下拉选项图文步骤...
Excel表格是我们日常办公常用到的工具软件之一,我们在Excel表格中处理数据非常的方便高效.有的朋友想在表格中设置多个下拉选项,却不知如何操作.那么表格设置下拉多个选项的方法是什么呢?这就为大家带 ...

设置下拉菜单的几种方法

一、设置display: none; hover的时候display: block;

二、使用transition属性

设置下拉菜单的几种方法相关推荐

最新文章

热门文章