<!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. 15-----float（浮动）

    浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思.它有四个值. none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 看一个例子: ...

  2. jquery——事件

    绑定事件的其他方法 以及 取消绑定 事件:: <!DOCTYPE html><html lang="en"><head> <meta ch ...

  3. Ubuntu搜狗输入法乱码情况

    cd ~/.config sudo rm -rf SogouPY* sogou*

  4. Asp.net中的ViewState用法

    Session,ViewState用法基本理论:session值是保存在服务器内存上,那么,可以肯定,大量的使用session将导致服务器负担加重. 而viewstate由于只是将数据存入到页面隐藏控 ...

  5. Day3上

    T1 星空[问题描述]你是能看到第一题的friends 呢.——hja点点星空是一张

  6. blog 题解目录

    洛谷: 1.P2430 严酷的训练 2.CF784E Twisted Circuit 3.P1886 滑动窗口 4.P1090 合并果子 5.P1119 灾后重建 6.P1690 贪婪的Copy 7. ...

  7. Browser Window

    Window 对象 Window对象表示浏览器中打开的窗口. 如果文档包含框架(iframe或iframe标签),浏览器会被html文档创建一个window对象,并为每个框架创建一个额外的window ...

  8. SqlServer图形数据库初体验

    SQL Server2017新增了一个新功能叫做图形数据库.图形指的拓扑图形,是一些Node表和Edge表的合集,Node对应关系数据库中的实体,比如一个人.一个岗位等,Edge表指示Node之前的关 ...

  9. OutOfMemoryError异常 和 StackOverflowError异常

      OutOfMemoryError异常  StackOverflowError异常  程序计数器 无 无 Java虚拟机栈 如果虚拟机栈可扩展,扩展时无法申请到足够内存 线程请求的栈深度大于虚拟机所 ...

  10. mif文件生成方法

    mif文件就是存储器初始化文件,即memory initialization file,用来配置RAM或ROM中的数据.常见生成方法: Quartus自带的mif编辑器生成 mif软件生成 高级编程语 ...