今天我们来学习一级导航栏和二级导航栏的输写
一、一级导航栏
1.首先我们先建立好html文件和css文件，并使其关联起来。
这里的href就是指css的路径，./指的是同级目录，如果css文件不在同一级，就可以使用../找上一级目录，直到找到css文件，我们以a来命名css文件。（这里推荐额外创建一个css文件，也就是外部样式表，也可以在head里面通过style标签编辑（内部样式表），或者在body里面每个元素中使用style标签编辑（行内样式表），后俩种不推荐，因为对于初学者可能会很混乱，而且不美观）
2.在html文件，body中创建div标签，并取名：
div就是块标签，我们可以在里面编辑内容，id就是类选择器，类选择器也可以使用class命名，不同的是class可以有很多同名，可以同时修改内容，而id只可以有一个名字，是独一无二的存在。id=“aa”的意思就是我们将这个div标签命名为aa，我们就可以在css文件中使用#aa{}来编辑内容。
3.在div标签中创建无序列表，并在每个列表建立链接：
ul就是无序列表（无序列表就是没有序号标注的列表），然后在无序列表中建立列表li，并在每个li中建立链接（a标签），这里教给大家一个便捷方法，在建立完ul标签后，我们可以在ul里边输入这样一行代码li*5>a 然后直接点回车（enter），这句话的意思就是创建5个li标签，并在每个li标签中创建a链接，同理，你想创建几个就把5改成几，如果不想要a链接，就直接去掉>a，直接写li*5就可以了。
4.在a标签中输入我们要输入的一级导航栏内容：
这里我们必须在a标签输入，只有这样才能把它设置成一个链接，a标签中的href就是网址，举个例子，加入我们a标签的内容是百度，我们就需要在href中输入http://www.baidu.com，这样我们就可以在网页中点击百度跳转到百度页面，同理，如果跳转的是我们内部文件，就需要使用./或../查找到内部文件，盘符文件需要从盘符开始写，一级一级的写，不可以跳过。这里我就不写网址了，你们做实例的时候可以加上
我们看一下网页效果图：
接着我们就开始操作css
5.先在css里面去除外边距和内填充
*代表全局选择器，margin代表外边距，也就是块与块之间的距离，设置为0就表示距离为0像素；padding代表内填充，代表着边框（border）与内容（content）之间的距离，同上为0像素；这里放上框架图更直观一点
6.设置我们的div标签大小与颜色
width指宽度，auto代表自动，这里的width：auto代表div的宽度就是页面的宽度；height指高度，这里我们设置的就是div标签高度为60像素；background-color指的是背景颜色，这里设置的就是div标签背景颜色为青色。
让我们看一下网页效果图：
7.设置li标签的各项属性
#aa>ul li指的是div标签aa的子元素ul的子元素li，>就是子代选择器，也就是下一级元素
list-sytle：none 代表去除无序列表前面的点
float 是浮动标签，float：left代表每个列表向左浮动
width：20% 是每个列表占据div标签20%的宽度（因为我们设立了5个列表，所以每个列表都有 20%的宽度）
height：60px 是指每个列表的高度为60像素
text-align：center 是指每个列表的内容在它的范围内水平居中
line-height：60px 是指每个列表的内容在它的范围内垂直居中（列表的高度为多少，这个就设多 少，这样就可以达到垂直居中的效果）
font-size：25px 指的是列表中文字的大小为25像素
让我们看看效果图：
8.设置a标签的属性
我们直接使用a{}，这样就可以选择html中的所有a标签，不存在上下级关系；
text-decoration：none；这行代码的作用就是去除a标签的下划线
color：red 把a标签的文字替换成红色（只能在这里替换，不可用子元素或其他的元素，因为a 标签本身自带颜色，其他地方改都无效）
看看效果图：
9.设置鼠标指针放在上面的变化：
hover指鼠标放在上面的变化；
li：hover指鼠标放在li标签上的变化，这里我们设置的是鼠标放在li标签上，背景颜色变成橙色；
a：hover指鼠标放在a链接上的变化，这里我们设置的是鼠标放在a链接上，文字变为绿色，并且 字体大小变为30像素。
效果图如下：
鼠标放在li标签上：
鼠标放在a链接上：
至此，我们的一级导航栏完成，下面我放上完整代码，然后我们开始在原有的基础上进行二级导航栏。
一级导航栏完整代码：
二、二级导航栏（基础）
1.html添加二级导航栏内容
我们在第一个li标签里添加一个div标签，将其命名为bb，并在里面创建3个无序列表（注意，这个li标签里面的a标签“首页”不可以放在div标签bb里面，如果放进去会变成bb的子元素）
我们看一下效果图：
2. 设置div标签bb的框架
因为我们的div标签bb是第一个li标签“首页”的子元素，所以我们填入100%继承li标签“首页”的宽度；我们创建了3个li标签，每个高度设置为60像素，所以div标签bb整齐高度为180像素，接着设置背景颜色backgrou-color为蓝色。
继承：如果我们没有设置子元素的属性，子元素将会继承父元素的文本样式
效果图如下：
3.隐藏和显示二级导航栏：
我们在#bb里面加入display：none；
display：none指的是隐藏起来
display：block指的是显示出来
第一行代码意思就是将bb隐藏起来
#aa>ul>li:hover #bb这串代码冒号前半段指的是aa的子元素ul的子元素li标签，hover指的是鼠标 放在上面的状态，图片中这个代码的整体意思就是当鼠标放上去bb的父级元素li标签时，显示二级导航栏
效果图如下：
鼠标不放在上面时：
鼠标放在首页时的变化：
鼠标放在二级导航栏222的变化：
鼠标放在二级导航栏222的a标签上的变化：
原数代码奉上：
当然，这只是一个简单的二级导航栏，我们平时见到的二级导航栏一点开都有很多链接，不止有竖的，还有很多横向的链接，下面我们就学习如何制作横向二级导航栏
三、二级导航栏（扩展）
1.创建足够多的li标签
我们就按照5*3的布局，在原有的基础上多建立12个标签，达成15个，以便分布均匀
我将网页页面缩小50%看一下效果图：
2. 我们修改一下之前的代码
将#bb里面的width改为具体数值：
这是我们页面的宽度因为我们这个div标签bb是首页li标签的子元素，所以100%会继承li标签的宽度，我们只有改成具体数值才可以实现div标签宽度的变化（宽度可以用多个工具测量，比如截图工具）
将鼠标放到首页上看一下效果图：
将#aa>ul>li改为#aa>ul li
>代表的子代，而空格代表的是后代，原来的代码代表的是ul的下一级元素中的li标签，改成空格就变成了ul包含的所有li标签
我将鼠标放在首页上看一下效果图：
将鼠标放在888的标签上面
3.然后，我们加上浮动和宽高
最后一个代码必须加上，这是固定搭配，这样可以防止全部设置浮动元素后，父级框架崩溃
4.修饰一下棱角（可修可不修）
在#aa{}，#aa>ul li{}，#bb{}这三个里面加入border-radius: 20px;
这里的像素最多可以放4个像素，分别代表着左上角，右上角，右下角，左下角，各位可以根据自己需求分别设定，我这里只写一个代表4个角同时设定20像素
效果图如下：
5.我们制作新闻资讯的二级导航栏
同理，我们先创建div标签和li标签;
这里我们将div标签命名为cc
接着我们在css里面设置好属性：
和上一个div标签bb一样的格式：
这里是效果图：
大家可以看到我们新闻资讯的二级导航栏位置不对，这是因为我们的二级导航栏的父元素是新闻资讯，所以他俩的起始位置是一样的，接下来我们要把他固定到最左侧，这将用到我们的定位属性。
6.定位
首先我们在要定位的元素的父级元素加上相对定位（position：relative；），我们要给新闻资讯的二级导航栏定位，它的父级元素是li标签，因为我们必须使用绝对定位（position：absolute；），如果不给父级元素增加定位的话，它就会根据窗口定位，这让我们操作起来会很麻烦，父级元素设置相对定位，只要不设置偏移值它就原地不动，不会造成影响。
我们在这里加上这一行代码，我们之前说过，这里是给div标签aa的子元素ul里面的所有后代元素li设置属性，我们要用到定位的元素的父元素也属于这里。
然后我们就加上绝对定位：
这里我们的left：-258px指的是向左偏移负258个像素，我们说过，二级导航栏和一级导航栏的起始位置相同，所以我们应该向左移动，并且是-258px，我们一个单元格的宽度就是258px，让我们看看效果图：
7.我们设置隐藏属性：
设置之前我们要修改一个代码：
将
修改为
其实我们就加入一个标签：nth-child（1），这里的意思就是ul的第一个子元素，里面的数字写几就是第几个子元素，之前的代码表示ul标签的所有li子元素，如果还是这样写，会造成错误发生，所以我们必须告诉html这具体是哪个属性
接着，我们使用同样的标签设置隐藏属性：
我们看一下效果图:
8.加上层级
因为我们使用定位将同样的标签放在同一位置，所以为了防止发生错误，我们必须加上层级（z-index：；）在里面填入数字，数字越大，层级越高，也就是优先级越高，这样他会优先显示层级高的元素，我们分别在div标签bb和div标签cc里面加入层级：
接着，我们在这里再放上层级：
这里的意思就是我把bb和cc都设置成0层级，然后当我鼠标放在bb时，bb的层级就会变成10，而cc的层级还是0，这样就会优先显示bb；cc也是同理（注：前提是元素必须有定位才可以使用）。
这样我们的二级导航栏制作完成，其实对比前面，主要是加了个定位，其他属性一样；如果想要制作后面的一级导航栏里面的二级导航栏，只需要将定位里的left调整就行。
完整代码奉上：
当然，还有一种情况，我们也能看到一种导航栏：一级导航是竖着的，二级导航栏在右边显示，其实它的原理和我们制作的原理相同，只是位置和定位发生改变而已，我奉上我制作的一个简单案例，大家可以参考一下
代码：
效果图：
鼠标放在首页的二级导航栏时：
鼠标放在新闻资讯的二级导航栏时：
下面的三个一级导航栏没有做，同理是一样的，只改变定位的位置就可以。
好啦，这就是我们二级导航栏的制作，是不是很简单，只要弄懂原理，信手拈来！
注：以上背景颜色均可换成背景图片，如有不会插入背景图片或者出现错误，可以看我发的上一篇文章或者直接私信我，我会在看到的第一时间帮助你解决问题。
我们下期见！
