用HTML+css制作一个简单的三级导航

以前刚开始学html的时候，一个很简单的导航条就把我难住了一个上午，现在自己做一个小案例，希望能帮助到更多的初学者。

—HTML部分

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简易导航条</title><link rel="stylesheet" href="css/style.css">
</head><body><header><nav><div class="common"><ul class="nav_left"><li><a href="#">首页</a><ul class="two"><li><a>二级菜单</a></li><li><a>二级菜单</a></li><li><a>二级菜单</a><ul class="three"><li><a>三级菜单</a></li><li><a>三级菜单</a></li><li><a>三级菜单</a></li></ul></li></ul></li><li><a href="#">产品</a></li><li><a href="#">服务</a></li><li><a href="#">关于</a></li></ul><ul class="nav_right"><li><a href="#">注册</a></li><li><a href="#">登录</a></li></ul></div></nav></header>
</body></html>

—CSS部分

* {margin: 0;padding: 0;font-family: Arial, Helvetica, sans-serif;
}header {width: 100%;
}li {list-style: none;
}a {text-decoration: none;font-size: 18px;color: #7f8c8d;
}nav {background: #ffffff;box-shadow: 0 0 5px #bdc3c7;/* 阴影 */height: 60px;
}.common {margin: 0 auto;width: 1200px;/* 让内容居中 */
}.nav_left li {float: left;line-height: 60px;width: 120px;
}.nav_left li a {text-align: center;display: block;
}.nav_left li:hover a {color: #27ae60;
}.nav_left .two {display: none;
}.nav_left li:hover .two {display: block;/* 鼠标滑过一级菜单显示二级菜单 */
}.nav_left .two li {position: relative;/*三级菜单绝对定位 父容器要使用相对定位*/clear: both;text-align: center;background-color: #f1f2f6;
}.nav_left .two li a {display: block;color: #7f8c8d;cursor: pointer;
}.nav_left .two li:hover a {/* 鼠标滑过二级菜单时 a标签的样式 */background: #bdc3c7;color: #27ae60;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;
}.nav_left .two>li:hover .three {display: block;/*当鼠标悬浮在二级菜单的li标签上时 显示三级菜单*/
}.nav_left .two .three {display: none;position: absolute;/*三级菜单设置绝对定位 脱离原文档流*/top: 0px;left: 120px;
}.nav_left .two .three li a {/* 后面类选择较多的原因是color属性会继承，我们不想它继承，所以选择器多，权重高，才能给后面的a标签设置上颜色，初学者可以自行搜索： CSS选择器的权重详解 */display: block;background-color: #f1f2f6;color: #7f8c8d;cursor: pointer;
}.nav_left .two .three li:hover a {background: #bdc3c7;color: #27ae60;border-radius: 5px;/* 圆角  为了适应多种浏览器的内核 */-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;
}/* 右边 */.nav_right li {float: right;line-height: 60px;
}.nav_right li a {padding: 0 25px;display: block;
}.nav_right li:hover a {color: #27ae60;
}

最终效果图如下：

喜欢的同学可以点赞哦！

用HTML+css制作一个简单的三级导航相关推荐

【meng_项目】python+flask+html+css制作一个简单的生日祝福语网页
python+flask+html+css制作一个简单的生日祝福语网页一个py文件: test.py 一个html文件: birthday_index.html 一张图片: ...
使用Dreamweaver/利用HTML5/CSS/制作一个简单的文字logo
一.制作一个简单的logo 1. 结构与样式分析首先我们根据logo的图片分析logo的效果,该logo由6个字母组成.在使用"数码测色计"测出logo的颜色,这里我们测出log ...
使用HTML+CSS制作一个简单的网页
简单学习了一下HTML和CSS,制作了下面这个网页(第一次做还在学习中),里面包含一些基础的布局包括导航条.分页栏.悬浮列表等内容. 网页预览(网页中的图片与图标均来自阿里巴巴矢量图标库) CSS代码 ...
基于HTML+CSS制作一个简单的家乡网页制作作业，广州介绍旅游网页设计代码学生个人html静态网页制作成品代码
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
基于HTML+CSS制作一个简单的家乡网页制作作业，广州介绍旅游网页设计代码学生个人html静态网页制作成品代码...
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
用html和css制作一个简单的导航条
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>导 ...
HTML+css制作一个简单八卦阵
html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
用HTML和CSS制作一个简单的爱心
效果图如下: index.html代码如下: <!DOCTYPE html> <html lang="en"> <head><meta c ...
html+css——做一个简单的底部导航栏
ps:小项目由html和css实现目录项目设计效果图设计 html部分 css部分源代码项目设计效果图话不多说,先直接上一下完成后的效果图: 通过以上效果图可以大致想一下你的思路,以及 ...
如何使用HTML制作一个简单美观的导航栏（代码详解）
在不久前学习了基础知识(并很快忘记了它们)后,几个月前我开始阅读它.我已经开始制作自己的网页以测试和提高我的技能,但是我在让导航栏正确显示时遇到了问题. 我的导航栏的 HTML 代码如下: Home ...

用HTML+css制作一个简单的三级导航

用HTML+css制作一个简单的三级导航相关推荐

最新文章

热门文章