纯css下拉菜单的制作
2024-10-10 15:53:40
通过观察下拉菜单的过程,发现有两种状态,一种是鼠标没有hover时,一种是鼠标hover时。
主菜单hover时,显示子菜单;主菜单没有hover时,不显示子菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>下拉菜单</title>
<link type="text/css" rel="stylesheet" href="./css/reset.css" />
<style>
/* no hover 状态 */
.xiala_menu{
width:30%; /* 调整宽度 */
margin:0 auto;
text-align:center;
}
.xiala_menu li{
width:80px;
float:left;
background:#e5e5e5;
margin-right:1px;
}
.xiala_menu li ul{
display:none;
}
/* hover 状态 */
.xiala_menu li:hover ul{
display:block;
}
.xiala_menu li:hover ul li{
background:#ccc;
margin:1px 0;
cursor:pointer;
} .xiala_menu li:hover ul li:hover{
color:red;
background:#bdbdbd;
}
</style>
</head> <body>
<div class="xiala_wrap">
<ul class="xiala_menu clearfix">
<li>
菜单1
<ul>
<li>
菜单11
</li>
<li>
菜单11
</li>
<li>
菜单11
</li>
<li>
菜单11
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
最新文章
- hadoop入门(1)——hadoop概述
- Jenkins学习五:更改Jenkins的主目录
- CentOS 6.5 安装Nginx 1.7.4
- css中的zoom的使用
- CSS常用样式整理
- 取出block所对应的hash值
- Ubuntu 12安装Virtualbox
- U盘制作Linux系统盘
- 为什么使用 SLF4J 而不是 Log4J 来做 Java 日志
- [ An Ac a Day ^_^ ] 	 CodeForces 601A The Two Routes 最短路
- java初级开发程序员(第五单元)
- Java学习笔记24(Integer类)
- (九)Delete an Index
- windows硬盘优化篇
- css样式的书写顺序及原理——很重要!
- python3字典中items()和python2.x中iteritems()有什么不同?
- MySQL 聚簇索引&;&;二级索引&;&;辅助索引
- 基于Openresty+的WEB安全防护系统架构--转
- [DLX精确覆盖] hdu 1603 A Puzzling Problem
- react查缺补漏01
热门文章
- struts2的标签中得到JSP脚本的变量值
- poj 2486( 树形dp)
- android webview与 java与javascript的交互
- 全自动编译FFmpeg(含x264,fdk aac,libmp3lame,libvpx等第3方库)
- Lucene学习总结:全文检索的基本原理
- 【Linux下进程机制】从一道面试题谈linux下fork的运行机制
- 转:Web前端,高性能优化
- [Unity2D]鼠标(或触摸)输入处理
- 【POJ】1228 Grandpa&#39;s Estate(凸包)
- java中的sleep()和wait()的区别