html简单实现下拉菜单
2024-08-31 02:24:17
主要用到的知识ul和li标签 ul li 是一个组合:是无序列表标签,在实际中用的非常多,
与之对应的是有序列表:ol li
li是不能单独使用,必须在于ul之中的
ul是块级元素,能直接定义宽高,而li是行级元素,不能直接定义高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉框</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
} #nav {
width: 600px;
height: 40px;
margin: 0 auto;
} #nav ul {
list-style: none;
} #nav ul li {
float: left;
line-height: 40px;
text-align: center;
position: relative;
} #nav ul li a {
text-decoration: none;
color: #000;
display: block;
padding: 0px 10px;
} #nav ul li a:hover {
color: #FFF;
background: #333
} #nav ul li ul {
position: absolute;
display: none;
} #nav ul li ul li {
float: none;
line-height: 30px;
text-align: left;
} #nav ul li ul li a {
width: 100%;
} #nav ul li ul li a:hover {
background-color: #06f;
} #nav ul li:hover ul {
display: block
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">学习中心</a>
<ul>
<li><a href="#">Oracle</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">mongodb</a></li>
<li><a href="#">redis</a></li>
</ul>
</li>
<li><a href="#">个人中心</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div> </body>
</html>
最新文章
- Puzzle 面向服务/切面(AOP/IOC)开发框架 For .Net
- Java程序员的日常—— FileUtils工具类的使用
- <;转>;Win7系统下利用U盘安装Ubuntu_12.04实现双系统教程
- 在指定时间干,必须干(kbmmw 中的事件调度)
- Node.js与Sails~方法拦截器policies
- RabbitMQ入门教程——发布/订阅
- (学习笔记)PHP的输出echo和print
- Android M新特性之Permissions
- WCF入门(22)
- 在asp.net mvc中如何使用Grid++ Report (锐浪报表)
- HDU-4678 Mine 博弈SG函数
- Writing a Windows Shell Extension(marco cantu的博客)
- ACE 主动对象模式的按部就班的实现方法
- 内功心法 -- java.util.ArrayList<;E>; (1)
- 进程间通信系列 之 命名管道FIFO及其应用实例
- js中级小知识5
- JS之iscroll.js的使用详解
- redis下操作Set和Zset
- Java API方式调用Kafka各种协议
- nginx 11个处理阶段 &;&; nginx lua 8个处理阶段
热门文章
- spring基础学习---简单配置文件
- php安全过滤类
- [Swift通天遁地]二、表格表单-(7)电子邮件Mail:实现单元格左右滑动调出功能按钮
- [Swift通天遁地]五、高级扩展-(3)日期和时间类型的扩展方法
- CyclibcBarrier与CountDownLatch区别
- Laravel5.1学习笔记19 EloquentORM 入门
- String字符串的完美度
- 软件架构自学笔记----分享“去哪儿 Hadoop 集群 Federation 数据拷贝优化”
- brew update失败提示:/System/Library/Frameworks/Ruby.framework/的解决方法
- Android开发高手课 - 02 崩溃优化(下):应用崩溃了,你应该如何去分析?