HTML+CSS制作⼆级菜单栏
今天我们来练习⼀下⼆级菜单栏，说实话⽐较简单，但是⾃⼰⼀个⼈写的时候错误百出，逻辑混乱，于是乎⽹上了⼏个案例，借鉴了⼀下思路，才整明⽩，鄙⼈确实不才，哈哈！
效果图附上：
⾸先：我已链接了外部样式重置，所以⽆需⾃⼰亲⾃写：
reset.css⽹上有很多，我⽤的是下⾯这个，免费分享给⼤家，永久有效哦！
android开发安卓软件开发
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">
html个人网页完整代码div+css<!-- ⼀级菜单 -->
<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">
nexus 3 torrent<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">
lambda控制器是什么意思
<!-- ⼀级菜单 w3school -->
<a href="www.w3school/">W3school</a>小程序开发api文档
<!-- ⼆级菜单 -->
<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);
}
效果图参考页⾯最顶部！！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。