HTML+CSS制作二级菜单栏

admin管理员组

文章数量:1794759

HTML+CSS制作二级菜单栏

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

效果图附上：

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

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

链接：pan.baidu/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="blog.csdn/weixin_36732046">我的博客</a> </li> <!-- 一级菜单 w3school --> <li class="nav-container"> <a href="www.w3school/">W3school</a> </li> <!-- 一级菜单 菜鸟教程 --> <li class="nav-container"> <a href="www.runoob/">菜鸟教程</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="blog.csdn/weixin_36732046">我的博客</a> <!-- 二级菜单 --> <ul class="nav-list"> <li> <a href="blog.csdn/weixin_36732046/category_9560702.html">工具安装</a> </li> <li> <a href="blog.csdn/weixin_36732046/category_8012920.html">问题解决</a> </li> <li> <a href="blog.csdn/weixin_36732046/category_8527355.html">实战案例</a> </li> <li> <a href="blog.csdn/weixin_36732046/category_8078929.html">Js函数</a> </li> </ul> </li> <li class="nav-container"> <!-- 一级菜单 w3school --> <a href="www.w3school/">W3school</a> <!-- 二级菜单 --> <ul class="nav-list"> <li> <a href="www.w3school/html/index.asp">HTML</a> </li> <li> <a href="www.w3school/html5/index.asp">HTML5</a> </li> <li> <a href="www.w3school/html5/index.asp">CSS</a> </li> <li> <a href="www.w3school/css3/index.asp">CSS3</a> </li> </ul> </li> <li class="nav-container"> <!-- 一级菜单 菜鸟教程 --> <a href="www.runoob/">菜鸟教程</a> <!-- 二级菜单 --> <ul class="nav-list"> <li><a href="www.runoob/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li> <li><a href="www.runoob/foundation/foundation-tutorial.html">Foundation5 教程</a></li> <li><a href="www.runoob/js/js-tutorial.html">JavaScript 教程</a></li> <li><a href="www.runoob/angularjs/angularjs-tutorial.html">CSS3 教程</a></li> <li><a href="www.runoob/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(attach.bbs.miui/forum/201202/18/090658g5shfjyixlhwjyyi.jpg); }

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

本文标签： 菜单栏htmlcss