<!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下拉菜单栏代码的更多相关文章

  1. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

  2. zTree插件之多选下拉菜单代码

    zTree插件之多选下拉菜单代码 css和js <!--ztree树结构--> <link rel="stylesheet" type="text/cs ...

  3. Extjs下拉树代码测试总结

    http://blog.csdn.net/kunoy/article/details/8067801 首先主要代码源自网络,对那些无私的奉献者表示感谢! 笔者对这些代码做了二次修改,并总结如下: Ex ...

  4. js 导航栏多项点击显示下拉菜单代码

    <!DOCTYPE html> <html> <head> <title>Dropdown</title> <!--<link ...

  5. ListView(2)最简单的上拉刷新、下拉刷新代码

    效果 最简单的上拉刷新和下拉刷新,当listview滚动到底部时向上拉刷新数据.当listview滚动到最顶部时下拉刷新.       图1,上拉刷新 图2,下拉刷新 1.设置lisview 加载he ...

  6. Excel制作多选下拉框代码以及图示

    1.首先  点击Sheet1(需要显示多选框的页) ,然后右键查看代码,进入编辑界面 2.写入如下代码 Private Sub Worksheet_SelectionChange(ByVal Targ ...

  7. 小米网css3导航下拉菜单代码

    效果:http://hovertree.com/texiao/css3/19/ 代码如下: <!doctype html> <!-- W3C规范 --> <html la ...

  8. ad广告下拉收起代码

    1. [代码][JavaScript]代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  9. zTree插件之单选下拉菜单代码

    <!--ztree树结构--> <link rel="stylesheet" type="text/css" href="asset ...

随机推荐

  1. poj3254（状压dp入门第一道题，很详细）

    题目链接:http://poj.org/problem?id=3254 学习博客:https://blog.csdn.net/harrypoirot/article/details/23163485 ...

  2. 埃氏筛法（求n以内有多少个素数）

    题目大意:给定整数n,请问n以内有多少个素数 思路:想必要判断一个数是否是素数,大家都会了,并且可以在O(根号n)的复杂度求出答案,那么求n以内的素数呢,那样求就显得有点复杂了,下面看一下这里介绍的

  3. Mybatis-Plus使用全解

    前言 之前写了<SpringBoot | 第九章:Mybatis-plus的集成和使用>一文,只是简单的使用条件构造器列举了一些通用的CURD操作.本人也想写一篇通用的关于mybatis- ...

  4. xmanger图形化登陆远程服务器

    由于网上的资料比较杂,经过本人整理实际操作验证,保证ok  本人的服务器系统为centos5.8 下面的都是centos服务器上的操作,需要简单的配置下: win客户端使用xmanger软件:首先是服 ...

  5. Unity3d开发的第一个实例

    1.untiy3d开发环境配置好以后,开始我的第一个开发实例 2.在Hirearch---create---3DObject---Cube,在场景中创建一个正方体 3.project---create ...

  6. 【转】Linq 语法

    Join操作符 适用场景:在我们表关系中有一对一关系,一对多关系,多对多关系等.对各个表之间的关系,就用这些实现对多个表的操作. 说明:在Join操作中,分别为Join(Join查询), Select ...

  7. Spring Cloud（2）：搭建Eureka

    Eureka Server的搭建: 使用IDEA工具 File->New Project->Spring Initializr->next Next Next->Next创建即 ...

  8. Day4 HTML新增元素与CSS布局

    Day4  HTML新增元素与CSS布局 HTML新增属性: 一:常见的布局标签(都是块级元素) <header>头部</header> <nav>导航</n ...

  9. 从零开始的全栈工程师——js篇2.11（原型）

    原型 原型分析 1.每个 函数数据类型(普通函数,类)都有一个prototype属性 并且这个属性是一个对象数据类型2.每个Prototype上都有一个constructor属性 并且这个属性值是当前 ...

  10. 前端JS电商放大镜效果

    前端JS电商放大镜效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...