本篇文章主要给大家介绍一下如何使用html+css完成二级横向以及竖向菜单导航制作；菜单导航是网站建设中最常用的一块了，基本每个网站内都会有个导航菜单，用鼠标划过还可以有下拉子菜单。

由上图我们可以看出，该图包含一个横向导航条，然后鼠标经过横向导航条之后，子导航显示出来。

1）制作页面所用知识点

我们这里主要用到的知识点就是列表标签（ul、dl）的使用、浮动（float）的使用、绝对定位（absolute）及鼠标经过（hover）的效果。

1、列表标签ul、dl（我们使用ul、dl来创建同类型的导航元素内容，通过设置css样式来达到图片所示效果）；

2、浮动元素float（每个导航元素我们需要使用float:left;让其左对齐，这里涉及到了我们之前讲解的如何清除浮动的影响）；

3、绝对定位absolute（对于子导航我们要使用绝对定位来让其浮动在上级有定位元素的下方，不占据元素空间）

4、鼠标经过hover（使用css的鼠标经过元素（hover）效果，配合display的none（隐藏）和block（显示）来实现子菜单的显示与隐藏）

具体的实现html代码以及css代码就如下图所示：

2）纵向菜单导航

还有一个纵向菜单导航原理跟横向的类似，只需简单调整一下css代码即可。

html代码跟横向一样，这里就不再贴图，具体的实现图片效果以及css代码就如下图所示：

好了，本篇文章就给大家说到这里，大家自己动手写一下看能不能写出一样的页面效果出来，也可以找一些类似的页面自己练习一下，有需要源码的可以直接私信我即可。

每日金句：每天收获小进步，积累起来就是大进步；每天收获小幸福，积攒起来便成大幸福。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。

本例参考了网上的例子，唯一不一样的是，我这里的操作是一步一步讲解，网上仅是源码。

一、我们先创建一张空白的网页，网页要自适应手机。

二、我们再创建网页的头部。

三、做出来的网页头部太丑了，我们要去掉盒子与浏览器的间隙，还有给头部加内部距离。

四、给网页头部添加一些内容。

五、接下来开始做导航条了。

六、发现没，导航条居然看不见，没有东西在里面自然是看不见的，我们加三个链接吧。

七、这回是看见了，不过样式太丑，我们改改样式。

八、加上内部距离，就好看了许多，即然是链接，我们加点动态吧，当鼠标在链接上面时，链接块变色。

九、开始做网页内容，网页内容我分为三块，左右两边是侧栏，中间是主要内容。

十、我想让它横着排，它却是竖着排，改改各个块的样式。

十一、给主体的各个块加点内容。

十二、内容是有了，但你会发现各块之间没有间隙，贴得太近了，我们改一下样式，加个内部距离。

十三、距离是有了，但有一个侧栏跑到了另一行，怎么回事？原来padding是会改变盒子的整体宽度，我们原本是100%，现在多了padding的宽度，自然就换行了，解决一下吧。

十四、这回终于在一行了，接下来可以做网页底部了。

十五、改改样式，让底部好看一点。

十六，这个时候，网页的整体版面就完成了，再补充一个小内容，让网页浏览器在小于600像素宽的时候，主体内容的三个块由横变竖。

移动端中我们经常碰到横屏竖屏的问题，那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。

CSS如何判断横屏竖屏

竖屏引用

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 

横屏引用

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

css代码

@media screen and (orientation: portrait) { 
 /*竖屏 css*/ 
} 
@media screen and (orientation: landscape) { 
 /*横屏 css*/ 
} 

JS判断横屏竖屏方法