HTML+CSS制作二级菜单栏

今天我们来练习一下二级菜单栏，说实话比较简单，但是自己一个人写的时候错误百出，逻辑混乱，于是乎网上找了几个案例，借鉴了一下思路，才整明白，鄙人确实不才，哈哈！

效果图附上：

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

reset.css网上有很多，我用的是下面这个，免费分享给大家，永久有效哦！

链接：https://pan.baidu.com/s/1doPA17vy--QtSzUB8q9b8w
提取码：qq4o

HTML：代码：

<!-- 外部样式表reset.css -->
<link rel="stylesheet" href="reset.css">
<!-- 外部样式表二级菜单 -->
<link rel="stylesheet" href="style.css">

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

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

HTML代码：
<div class="topmenu"></div>

CSS代码：
/* 设置整个容器宽高背景色 */
.topmenu {width: 100%;height: 50px;background: lightgreen;
}

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

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

HTML代码：
<div class="topmenu"><!-- nav 整个导航栏 --><ul class="nav"><!-- 一级菜单 --><li class="nav-container"><a href="https://blog.csdn.net/weixin_36732046">我的博客</a></li><!-- 一级菜单 w3school --><li class="nav-container"><a href="https://www.w3school.com.cn/">W3school</a></li><!-- 一级菜单 菜鸟教程 --><li class="nav-container"><a href="https://www.runoob.com/">菜鸟教程</a></li></ul>
</div>

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. 一级菜单栏写完啦，接下来写二级菜单栏，把二级菜单栏添加到一级的<li>下面：

附上完整的HTML代码：

<div class="topmenu"><!-- nav 整个导航栏 --><ul class="nav"><!-- 一级菜单 --><li class="nav-container"><a href="https://blog.csdn.net/weixin_36732046">我的博客</a><!-- 二级菜单 --><ul class="nav-list"><li><a href="https://blog.csdn.net/weixin_36732046/category_9560702.html">工具安装</a></li><li><a href="https://blog.csdn.net/weixin_36732046/category_8012920.html">问题解决</a></li><li><a href="https://blog.csdn.net/weixin_36732046/category_8527355.html">实战案例</a></li><li><a href="https://blog.csdn.net/weixin_36732046/category_8078929.html">Js函数</a></li></ul></li><li class="nav-container"><!-- 一级菜单 w3school --><a href="https://www.w3school.com.cn/">W3school</a><!-- 二级菜单 --><ul class="nav-list"><li><a href="https://www.w3school.com.cn/html/index.asp">HTML</a></li><li><a href="https://www.w3school.com.cn/html5/index.asp">HTML5</a></li><li><a href="https://www.w3school.com.cn/html5/index.asp">CSS</a></li><li><a href="https://www.w3school.com.cn/css3/index.asp">CSS3</a></li></ul></li><li class="nav-container"><!-- 一级菜单 菜鸟教程 --><a href="https://www.runoob.com/">菜鸟教程</a><!-- 二级菜单 --><ul class="nav-list"><li><a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a href="https://www.runoob.com/foundation/foundation-tutorial.html">Foundation5 教程</a></li><li><a href="https://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a href="https://www.runoob.com/angularjs/angularjs-tutorial.html">CSS3 教程</a></li><li><a href="https://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li></ul></li></ul> <!-- nav 整个导航栏结束 --></div>

效果图：

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);
}

效果图参考页面最顶部！！

HTML+CSS制作二级菜单栏相关推荐

html 隐藏_HTML实战篇：纯css制作二级横向以及竖向菜单导航
本篇文章主要给大家介绍一下如何使用html+css完成二级横向以及竖向菜单导航制作:菜单导航是网站建设中最常用的一块了,基本每个网站内都会有个导航菜单,用鼠标划过还可以有下拉子菜单. 由上图我们可以 ...
导航栏以及二级菜单栏（下拉列表）的制作
作为新手小白,在我们熟悉了HTML , CSS,JS的功能和语法之后,Web前端开发中,更重要的还有界面的美化,主要依据CSS的庞大功能来实现,今天我来给大家分享的是,利用html代码来实现横向导航栏 ...
纯div+css制作的弹出菜单
纯div+css制作的弹出菜单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
HTML5制作二级菜单（主菜单的子菜单）
HTML5制作二级菜单(主菜单的子菜单) 一.HTML文件代码二. CSS文件代码三.效果图一.HTML文件代码  <!DOCTYPE h ...
纯css制作三级下拉菜单
css本身的功能就挺强大的,尤其是css3出来之后,大部分特效只用css3就能完成了,无需再费心思去想js怎么怎么做jQuery怎么怎么做,代码简洁质量轻巧.下面是本人用纯css制作的三级下拉菜单效果 ...
如何简单制作一个菜单栏
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8&q ...
css制作动态按钮导航栏,巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
网页二级菜单栏的几种做法
网页二级菜单栏的第一种做法,纯css 第一种:纯css的写法: <!DOCTYPE html> <html lang="en"> <head>& ...
纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...

HTML+CSS制作二级菜单栏

今天我们来练习一下二级菜单栏，说实话比较简单，但是自己一个人写的时候错误百出，逻辑混乱，于是乎网上找了几个案例，借鉴了一下思路，才整明白，鄙人确实不才，哈哈！

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

HTML+CSS制作二级菜单栏相关推荐

最新文章

热门文章