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 ...
随机推荐
- Java面向对象_内部类
概念:内部类就是类的内部定义的类 成员内部类格式如下:class Outer{ class Inner{} } 编译上述代码会产生两个文件:Outer.class和Outer$Inner.class ...
- (转)linux 中使用ls指定输出时间格式
linux 中使用ls指定输出时间格式 原文:http://blog.csdn.net/chaofanwei/article/details/13018753 ls -l --time-style=x ...
- 牛客网Java刷题知识点之四种不同的方式创建线程
不多说,直接上干货! 有4种方式可以用来创建线程: 第一种:继承Thread类,重写run方法 第二种:实现Runnable接口,并实现该接口的run方法(一般我们在编程的时候推荐用这种) 第三种:实 ...
- 《从0到1学习Flink》—— 介绍Flink中的Stream Windows
前言 目前有许多数据分析的场景从批处理到流处理的演变, 虽然可以将批处理作为流处理的特殊情况来处理,但是分析无穷集的流数据通常需要思维方式的转变并且具有其自己的术语(例如,"windowin ...
- sqlserver2008执行200M以上的大脚本文件，打开脚本总是报“未能完成操作，存储空间不足”
用sqlcmd命令行工具. 1.win7下快捷键:win+R 2.输入cmd,确定 3.输入命令:sqlcmd -S <数据库> -i C:\<数据文件>.sql 例:sql ...
- ElasticSearch安装和核心概念
1.ElasticSearch安装 elasticsearch的安装超级easy,解压即用(要事先安装好java环境). 到官网 http://www.elasticsearch.org下载最新版的 ...
- Java 在使用@Select遇到的问题：拼接字符串将数组拼为了字符串
Java再用@Select拼接sql语句时候, #{参数名}:是加引号的 ${参数名}:是不加引号的 例如: userIds为List或者数组,值为1,2,3,4,5 1.@Select(" ...
- hibernate课程 初探单表映射2-1 hibernate进阶 本章简介
本章简介,主要讲5大块的内容 1 hibernate.cfg.xml的配置 2 session 的简介 3 transaction的简介 4 session的详解 5 对象关系映射常用配置
- 自定义HashMap的键
用自定义的类型作为HashMap的key,必须同时重载hashCode()和equals(),才可以实现在HashMap中的查找自定义键. 例如自定义Point类: public class Poin ...
- html 02-认识html
1. HTML 初识 HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言. HTML 不是一种编程语言,而是一种标记语言 (markup ...