HTML+CSS制作二级菜单栏

　　首先：我已链接了外部样式重置，所以无需自己亲自写：

　　reset.css网上有很多，

　　HTML：代码：

　　注意：以下我写的所有样式，必须要用reset.css外部样式表!!

　　1. 首先，我们来创建一个容器，用来放置整个导航栏：

　　HTML代码：

　　CSS代码：

　　/* 设置整个容器宽高背景色 */

　　.topmenu {

　　width: 100%;

　　height: 50px;

　　background: lightgreen;

　　}

　　效果图：只有一个绿色的条哈!

　　

 

　　2. 接下来我们要在.topmenu 容器中添加内容：

　　HTML代码：

　　我的博客

　　W3school

　　菜鸟教程

　　CSS代码：

　　/* 一级菜单栏.nav-container设置 */

　　.topmenu .nav .nav-container {

　　float: left; /* 一级菜单设置左浮动，使其水平排列 */

　　background: lightgreen; /*给整个一级菜单设置背景色(二级菜单包括在一级菜单中)*/

　　text-align: center; /* 对齐方式为居中 */

　　width: 155px; /*设置宽度*/

　　border-right:solid 2px #fff; /*使用右边框分割*/

　　}

　　设置字体行高和颜色：

　　a {

　　line-height: 50px;

　　color: #fff;

　　}

　　3. 一级菜单栏写完啦，接下来写二级菜单栏，把二级菜单栏添加到一级的

　　下面：郑州治疗妇科哪家好 http://www.120kdfk.com/

　　附上完整的HTML代码：

　　我的博客

　　工具安装

　　问题解决

　　实战案例

　　Js函数

　　W3school

　　HTML

　　HTML5

　　CSS

　　CSS3

　　菜鸟教程

　　Bootstrap 教程

　　Foundation5 教程

　　JavaScript 教程

　　CSS3 教程

　　JSON 教程

　　3. 我们完成的差不多了，现在只需要把二级菜单栏隐藏，然后让它点击对应的一级菜单栏的时候再出现就行了。

　　CSS代码：

　　/* 隐藏二级菜单 */

　　.topmenu .nav .nav-container .nav-list {

　　display: none;

　　}

　　/*点击一级菜单的时候显示二级菜单*/

　　.topmenu .nav .nav-container:hover .nav-list {

　　display: list-item;

　　}

　　/*点击时变色*/

　　.topmenu li:hover{

　　background: lightskyblue;

　　}

　　4. 好啦!已经全部做完啦! 网页背景是我自己添加的，为了美化视觉效果用!

　　CSS代码：

　　/* 网页背景图片 */

　　body {

　　background:url(http://attach.bbs.miui.com/forum/201202/18/090658g5shfjyixlhwjyyi.jpg);

　　}