DIV+CSS制作二级横向弹出菜单,略简单
没有使用JavaScript控制二级菜单的显示,结果如上图所示。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯DIV+CSS制作二级横向弹出菜单</title>
<style type="text/css">
.menu{
font-family:arial,sans-serif;
/*width:750px;这里的宽度设置并不是必须的*/
padding:;
margin:50px;
}
.menu ul{
padding:;
margin:;
/*ul和ol、li都有list-style-type属性,*/
list-style-type:none;
}
.menu ul li{
/*float属性定义元素在哪个方向浮动,浮动元素会生成一个块级框。如果浮动非替换元素,则要
指明一个明确的宽度,否则会被尽可能的压缩。*/
float:left;
position:relative;
list-style-type:none;
}
.menu ul li a, .menu ul li a:visited{
/*display的值,none表示不被显示;block表示显示为块级元素,元素前后
有换行符;inline为默认值,内联元素,前后没有换行符……*/
display:block;
text-align:center;
text-decoration:none;
width:104px;
height:30px;
color:#000;
border-width:1px solid #fff;
background:#c9c9a7;
line-height:30px;
font-size:11px;
}
/*鼠标无动作时不显示*/
.menu ul li ul{
display:none;
}
/*当鼠标指向第一级li时,第二级ul的动作*/
.menu ul li:hover ul{
display:block;
position:absolute;
top:30px;
left:;
width:105px;
}
.menu ul li:hover ul li a{
display:block;
background:#faeec7;
color:#000;
}
.menu ul li:hover ul li a:hover{
background:#dfc184;
color:#000;
}
/*clear属性定义了元素的哪边上不允许出现浮动元素。*/
.clear{
clear:both;
}
</style> </head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="#">一级菜单</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a class="hide" href="#">一级菜单</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a class="hide" href="#">一级菜单</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a class="hide" href="#">一级菜单</a></li>
<div class="clear"></div>
</ul> </div> </body>
</html>
DIV+CSS制作二级横向弹出菜单,略简单的更多相关文章
- 纯div+css制作的弹出菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 纯css实现鼠标感应弹出二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- web标准(复习)--4 纵向导航菜单及二级弹出菜单
今天我们开始学习纵向导航菜单及二级弹出菜单,包含以下内容和知识点: 纵向列表 标签的默认样式 css派生选择器 css选择器的分组 纵向二级列表 相对定位和绝对定位 一.纵向列表纵向列表或称为纵向导航 ...
- 个人练习:使用HTML+CSS制作二级菜单
最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...
- Web标准:四、纵向导航菜单及二级弹出菜单
Web标准:四.纵向导航菜单及二级弹出菜单 知识点: 1.纵向列表 2.标签的默认样式 3.css派生选择器 4.css选择器的分组 5.纵向二级列表 6.相对定位和绝对定位 1)纵向列表 可以看 ...
- css+html+js实现多级下拉和弹出菜单
本文将使用css+html+js实现横向菜单.具有多级弹出菜单下拉. 首先我们来看看效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvajkwMzgy ...
- css模仿微信弹出菜单
css模仿微信弹出菜单 效果图: html: <div class="action-sheet-backdrop"> <div class="act ...
- 下拉的DIV+CSS+JS二级树型菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 布局分析002:入门级的CSS导航弹出菜单
这种弹出菜单非常有意思,也有记录的意义,甚至可以说,掌握了这种弹出菜单,基本上CSS掌握的差不多. 主要涉及下面三个重要知识: CSS的继承性质. relative absolute定位. 子选择符& ...
随机推荐
- Exchange Server 2013就地存档
9.1就地存档 就地存档有助于重新获得对组织邮件数据的控制,而无需个人存储 (.pst) 文件,并且允许用户在可通过 Microsoft Outlook 2010及更高版本和 Microsoft Of ...
- iOS开发-- 创建podspec文件,为自己的项目添加pod支持
开篇扯淡 作为一个iOS开发者,一定用过CocoaPods吧,没用过?点这儿去面壁吧 Cocoapods作为iOS开发的包管理器,给我们的开发带来了极大的便利,而且越来越多的第三方类库支持Pod,可以 ...
- IIS7配置PHP运行环境
1.下载PHP运行包,网址:http://windows.php.net/download/ 选择的对应的版本包下载,并解压到相应的目录中(不限定),如:E:\vss\php\php_sdk 2.配置 ...
- js的闭包
一,关于js闭包的只是感觉很高大上似乎,对于学弱来说任何问题都是这样的,值得去钻研和提高. 资料上理解的都是关于js的闭包其实就是js的变量的作用域的灵活使用. 函数内部定义变量的时候,一定要用 va ...
- 描述Linux运行级别0-6的各自含义
中文: 0: 关机模式 1:单用户模式<==破解root密码 2:无网络支持的多用户模式 3:有网络支持的多用户模式(文本模式,工作中最长使用的模式) 4:保留,未使用 5:有网络支持又x-wi ...
- Hibernate疑问
官方User_guide中,3.2节 JPA Bootstrapping 第一段最后一句话, The standardized approach has some limitations in cer ...
- Security » Authorization » 介绍
Introduction¶ 介绍 77 of 87 people found this helpful Authorization refers to the process that determi ...
- linux笔记:shell基础-bash变量
shell变量设置规则: 变量的分类: 环境变量的设置: 系统常见环境变量: 位置参数变量(用来接收脚本的参数): 预定义变量: 接收键盘输入(将键盘输入的值赋值给变量名): 用declare声明变量 ...
- Linux 磁盘管理
Linux磁盘管理好坏管理直接关系到整个系统的性能问题. Linux磁盘管理常用三个命令为df.du和fdisk. df:列出文件系统的整体磁盘使用量 du:检查磁盘空间使用量 fdisk:用于磁盘分 ...
- SPSS数据分析—最小一乘法
线性回归最常用的是以最小二乘法作为拟合方法,但是该方法比较容易受到强影响点的影响,因此我们在拟合线性回归模型时,也将强影响点作为要考虑的条件.对于强影响点,在无法更正或删除的情况下,需要改用更稳健的拟 ...