html下拉菜单栏代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS实现下拉菜单</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
font:14px "Microsoft YaHei",sans-serif;
}
ul {
list-style: none;
}
.container {
margin: 0 auto;
width: 1000px;
}
.nav {
/*margin-top: 60px;*/
width: 100%;
height: 40px;
line-height: 40px;
background: #333;
}
/*一级菜单*/ /*该选择器会选择 所有li*/
.nav li {
float: left;
position: relative;
}
/*一级菜单*/
.nav li a {
/*因为a是内联元素*/
display: block;
width: 100px;
text-align: center;
color: #fff;
text-decoration: none;
}
/*二级菜单*/
.nav li ul li a {
color: #333;
}
.nav li ul li {
/*覆盖前面设置 */
float: none;
}
.nav li ul {
/*border: 1px solid #ccc;
border-top: none;*/
background: #fff;
/*二级菜单先隐藏*/
display: none;
/*绝对定位*/
position: absolute;
left:0;
top:;
}
/*划过那个li 哪个li就变红*/
.nav li:hover {
background: red;
}
.nav li:hover ul{
display: block;
}
/*设置banner*/
.banner img {
width: 100%;
}
</style>
</head>
<body>
<div class="nav">
<div class="container">
<ul>
<li><a href="#">首页</a></li>
<li>
<a href="#">博客</a>
<ul>
<li><a href="#">同志博客</a></li>
<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>
<li><a href="#">绿色论坛</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
<li>
<a href="#">举报我们</a>
<ul>
<li><a href="#">涉黄</a></li>
<li><a href="#">涉黑</a></li>
<li><a href="#">涉赌</a></li>
<li><a href="#">涉毒</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="banner">
<img src="../../dist/images_one/meinv02.jpg" alt="">
</div>
</body>
</html>
html下拉菜单栏代码的更多相关文章
- 可控制导航下拉方向的jQuery下拉菜单代码
效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...
- zTree插件之多选下拉菜单代码
zTree插件之多选下拉菜单代码 css和js <!--ztree树结构--> <link rel="stylesheet" type="text/cs ...
- Extjs下拉树代码测试总结
http://blog.csdn.net/kunoy/article/details/8067801 首先主要代码源自网络,对那些无私的奉献者表示感谢! 笔者对这些代码做了二次修改,并总结如下: Ex ...
- js 导航栏多项点击显示下拉菜单代码
<!DOCTYPE html> <html> <head> <title>Dropdown</title> <!--<link ...
- ListView(2)最简单的上拉刷新、下拉刷新代码
效果 最简单的上拉刷新和下拉刷新,当listview滚动到底部时向上拉刷新数据.当listview滚动到最顶部时下拉刷新. 图1,上拉刷新 图2,下拉刷新 1.设置lisview 加载he ...
- Excel制作多选下拉框代码以及图示
1.首先 点击Sheet1(需要显示多选框的页) ,然后右键查看代码,进入编辑界面 2.写入如下代码 Private Sub Worksheet_SelectionChange(ByVal Targ ...
- 小米网css3导航下拉菜单代码
效果:http://hovertree.com/texiao/css3/19/ 代码如下: <!doctype html> <!-- W3C规范 --> <html la ...
- ad广告下拉收起代码
1. [代码][JavaScript]代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
- zTree插件之单选下拉菜单代码
<!--ztree树结构--> <link rel="stylesheet" type="text/css" href="asset ...
随机推荐
- 转 xshell 图像化展示
http://www.cnblogs.com/kellyseeme/p/7965830.html 限制: 无法显示通过堡垒机登录的机器的图形接界面. 只能显示直接登录的服务到期的图像化界面 Xshel ...
- HDU 4622 Reincarnation Hash解法详解
今天想学字符串hash是怎么弄的.就看到了这题模板题 http://acm.hdu.edu.cn/showproblem.php?pid=4622 刚开始当然不懂啦,然后就上网搜解法.很多都是什么后缀 ...
- 《从0到1学习Flink》—— Flink 写入数据到 Kafka
前言 之前文章 <从0到1学习Flink>-- Flink 写入数据到 ElasticSearch 写了如何将 Kafka 中的数据存储到 ElasticSearch 中,里面其实就已经用 ...
- Docker | 第一章：Docker简介
前言 作为本系列的起始章节,本章节主要是对Docker的相关概念进行简单阐述下.自此也是查阅了相关资料,奈何也都是英文版居多,看的是有点头大的.现在悔不当初不好好学习英文了.o(︶︿︶)o 唉 Doc ...
- Vue provide/inject 部分源码分析 实现响应式数据更新
provide/inject 数据响应式更新的坑及源码解析 下面是我自己曾经遇到 一个问题,直接以自己QA的形式来写吧 自问自答了,需要的同学也可以直接访问segmentfault地址 官网给出实例, ...
- java网络编程—TCP（1）
演示tcp的传输的客户端和服务端的互访. 需求:客户端给服务端发送数据,服务端收到后,给客户端反馈信息. 客户端: 1,建立socket服务.指定要连接主机和端口. 2,获取socket流中的输出流. ...
- 【转】Nginx跳转任意Http请求到Https
网站买了证书,绿条,多霸气! 那么自然得拦截http的访问方式了. 拦截http,301到https 各种Google,最后在Nginx官网找到例子,配置很简单,如下: server { listen ...
- 合理设置apache的最大连接数
手头有一个网站在线人数增多,访问时很慢.初步认为是服务器资源不足了,但经反复测试,一旦连接上,不断点击同一个页面上不同的链接,都能迅速打开,这种现象就是说明apache最大连接数已经满了,新的访客只能 ...
- Java Annotation使用详解
Java Annotation是JDK5.0引入的一种注释机制.它与注释有一定区别,可以理解为代码上的特殊标记,通过这些标记我们可以在编译,类加载,运行等程序类的生命周期内被读取.执行相应的处理.通 ...
- 美国移民局的I797表原件和I129表是什么呢
I-129表,Petition for a Non-immigrant Worker,即非移民工作许可申请表I797 表 ,Original L1-1A approval notice L1签证批准通 ...