本篇文章主要给大家介绍一下如何使用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代码就如下图所示：

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

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

天来给大家分享一些导航条的设计形式，帮助大家建设营销型网站，提升SEO优化效果。

一、网站底部横向导航

最常见的网站导航，符合用户浏览习惯，用户进入网站之后，可第一眼看到网站导航的位置，一般位于网站的头部部分，且占用整个网站的空间，这种导航适用于网站栏目在8-10个左右的网站。也是用户浏览网站最常见的导航，可方便告知用户网站分为哪些板块。在导航上面加入下拉菜单，可增加网站于用户的互动性，也可支持更多的网站链接，用户可不用滚动滚动条即可直接进入网站任何一个栏目界面。

二、HTML5抽屉式导航

此类导航多见于手机网站，由于手机屏幕大小的限制，大多手机网站能够更大范围展示给用户产品信息，会把网站导航设计为抽屉式导航。默认情况下是不直接显示导航的，需要用户点击某个按钮，才会动态的显示出导航。抽屉式导航一般以竖向排列，位于网站的左侧或右侧，也可根据需求加入横向二级菜单，可在有限的屏幕 内最大范围为用户随时提供最全的有效连接，不必用户来回滚动屏幕去寻找其他栏目的入口。

三、固定式侧边导航

固定式侧边导航不仅可以给人一种耳目一新的感觉，也会给用户一种明亮干净的网站布局，由于用户习惯使用横向导航，当网站采用侧边导航的时候，能够很好的抓用用户眼球，加之鼠标滑动效果，可更加激起用户的点击欲。侧边导航有足够的空间表现自己的引导作用，大量的留白可使用户感觉整个网站具有呼吸之处，采用优 美的设计，可更加引起用户注意。

四、选项卡式导航

在一些特殊行业的网站上，使用常规导航会和整个网站很不搭配，比如卡通玩具类，幼儿园类网站都需要使用选项卡导航。选项卡导航可以随意设计成任何符合网站整体效果的样子，配合网站其他元素，提高网站视觉效果。选项卡导航相比其他导航有一个明显的优势：网站设计师可自由发挥自身水平，对用户产生积极的心里效 应。

五、响应式导航

响应导航是存在于移动设备的特殊导航，采用html5+css3书写，可根据手机不同系统，不同屏幕，不同尺寸调整导航布局结构，完美融合手机、平板的移 动设备应用，是使用移动设备访问网站用户独一无二的选择，简洁的布局，大气的整体感，为用户提供更好的阅读体验。响应式导航的优势在于，能够更加符合移动设备的用户浏览，用户不必再去双击屏幕放大网页，或输入表单的时候还需来回切换输入法，可直接通过响应式导航进行实现。

天这篇文章我们来说一下css的浮动属性（float），给块状元素添加float属性可以使其转变为行内元素，也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。

（1）float使用语法

css的float主要有3个属性值none、left、right，默认为none；具体的使用如下所示：

float:none; （不使用浮动）

float:left; （靠左浮动）

float:right; （靠右浮动）

（2）float使用案例

我们通过案例来实际演练一下float元素的使用技巧。

1、float:left的使用练习

我们这里创建一个导航条，导航条包含首页、关于我们、新闻中心、案例展示等栏目名称。具体的网页代码以及显示效果就如下图所示：

由上图可以看出默认的样式是竖排显示的，但是我们常见的网页导航条都是横排显示的，这时候我们就可以使用float属性来使块状元素转变为行内元素，并让居左显示。

这里我们创建一个宽度为980px的导航条，给子元素（li）添加float的属性并对齐进行填充（padding）以及外间距（margin）的润色。具体的网页代码以及显示效果就如下图所示：

网页中的显示效果：

2、float:right的使用练习

float:right顾名思义用于元素靠右对齐，我们来看下面的一个例子，我们随意写一篇文字，然后文字中插入一张图片并使图片右对齐。

我们再网页中可以看到图片已经浮动到网页的右侧中去了。

好了，本篇文章就给大家说到这里，大家可以注意看下我们使用float之后会出现什么问题，下边文章我们会给大家讲解如何清除float带来的负面影响。

每日金句：你不能拼爹的时候，你就只能去拼命！喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。