利用css制作二级下拉菜单

一目了然、通俗易懂——利用css制作二级下拉菜单

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>利用css制作二级下拉菜单</title><style type="text/css">* {margin: 0;padding: 0;/* 清除内外边距 */}div {margin: 0px auto;/* 盒子给宽高之后,margin: 0px auto;居中才会生效 */width: 300px;height: 300px;background-color: pink;}ul li {list-style: none;/* 去掉元素前的小圆点 */}ul a {text-decoration: none;/* 去掉字体的下划线 */}ul li {/* 一级菜单的样式 */float: left;width: 100px;height: 36px;line-height: 36px;/* 行高等于高使文字垂直居中 */text-align: center;background: #bcecdd;}ul li ul li {display: none;/* 隐藏二级菜单 */}ul li:hover ul li { /* 鼠标经过时显示二级菜单 */display: block;/* 二级菜单转化为块级元素,使其独占一行 */}ul li:hover {background-color: springgreen;/* 鼠标经过时显示的背景颜色 */}</style></head><body><div><ul><li><a href="">一级</a><ul><li><a href="">二级</a></li><li><a href="">二级</a></li><li><a href="">二级</a></li></ul></li><li><a href="">一级</a><ul><li><a href="">二级</a></li><li><a href="">二级</a></li><li><a href="">二级</a></li></ul></li><li><a href="">一级</a><ul><li><a href="">二级</a></li><li><a href="">二级</a></li><li><a href="">二级</a></li></ul></li></ul></div></body>
</html>

运行效果：

利用css制作二级下拉菜单相关推荐

利用CSS实现悬停下拉菜单
利用CSS实现悬停下拉菜单 1.效果鼠标移到[搜索引擎],自动弹出其下拉菜单,在下拉菜单里移动,光条随之移动. 2.代码 <!DOCTYPE html> <html lang=&q ...
Excel如何快速制作二级下拉菜单
今天跟大家分享一下Excel如何快速制作二级下拉菜单 1.首先在单元格中录入一级二级下拉菜单信息数据 2.然后选中这些数据单元格区域 3.点击下图选项(Excel工具箱,百度即可了解详细下载安装信息, ...
纯css制作三级下拉菜单
css本身的功能就挺强大的,尤其是css3出来之后,大部分特效只用css3就能完成了,无需再费心思去想js怎么怎么做jQuery怎么怎么做,代码简洁质量轻巧.下面是本人用纯css制作的三级下拉菜单效果 ...
计算机二级excel数据有效性,原来Excel数据有效性还可以这样做——制作二级下拉菜单...
很多时候,在进行设置数据有效性时,我们希望可以根据前一单元格的内容,使用动态的数据选项. 如下图为一个员工信息表,现希望在F列制作下拉列表,下拉列表的内容根据E列输入的省份变化而变化,如在E2单元格中 ...
数据有效性高级应用——制作二级下拉菜单
很多时候,在进行设置数据有效性时,我们希望可以根据前一单元格的内容,使用动态的数据选项. 如下图为一个员工信息表,现希望在F列制作下拉列表,下拉列表的内容根据E列输入的省份变化而变化,如在E2单元格中 ...
怎样在excel中利用有效性序列建立二级下拉菜单
比如在A列中选择部门名称,B列中的选择菜单自动会变成该部门下所有员工问题补充: 问题一样.那答案呢? madm 的二级下拉菜单的公式如何运用..能否发文件上来提问者: superaoyi - ...
兼容IE各版本的纯CSS二级下拉菜单
这是一个标准的CSS下拉菜单制作教程,有针对目前流行的IE6/IE7/IE8不同版本的CSS代码,因此可以在IE之间完全兼容,不过其它的浏览器像火狐/GG浏览器之类的没有测试,如果兼容IE8的话,那么 ...
绑定dictionary 给定关键字不再字典中_VBA数组与字典解决方案第51讲：字典嵌套及二级下拉菜单的制作...
大家好,今日我们继续讲解VBA数组与字典解决方案,今日讲解第51讲:对字典嵌套的理解及二级下拉菜单的制作. 在讲字典的时候,我反复说明,字典看视非常简单,由于它具有直达性可以省略去我们大量的循环查找代 ...
绑定dictionary 给定关键字不再字典中_对字典嵌套的理解及二级下拉菜单的制作...
大家好,今日我们继续讲解VBA数组与字典解决方案,今日讲解第51讲:对字典嵌套的理解及二级下拉菜单的制作. 在讲字典的时候,我反复说明,字典看视非常简单,由于它具有直达性可以省略去我们大量的循环查找代 ...
仿安居客首页导航栏及二级下拉菜单Html+Css+JavaScript
这次仿写的是安居客的首页导航栏,要求实现二级下拉菜单首先,这是原网页的效果接下来是html部分 <div class="box1"><ul id=" ...

利用css制作二级下拉菜单

一目了然、通俗易懂——利用css制作二级下拉菜单

利用css制作二级下拉菜单相关推荐

最新文章

热门文章