一定义一个盒子“menu”，用来装这个导航的二用无序列表ul中的列li放导航的内容三把li的浮动float设置为向左浮动floatleft，这样，就实现了水平导航条了四在做其他的一些修饰。

all 1s ofontsize12px是display inlineblock 的原因，把display inlineblock 换成display block然后利用浮动float。

这样有助于你理解原理\r\n导航栏中所有的链接，都有一个共同的内容target=quottarget_areaquot，意为在目标区显示内容，而目标区就是右边的那部分至于做成什么样子，可以随便\r\n右边的内容区最主要的就是一个浮动。

样式为ul，li liststyle liststyletype padding0 margin0 *清除ul，li的默认样式*第五，由于默认的无序列表是竖排的，所以需要为其添加浮动，同时编辑宽度和距离等样式添加样式为 ul。

导航栏基本都是横排竖排列的，看到的大部分都是横排排列的，每个人都有自己的方法做出好看的导航排列，方法有很多种，选择自己快速的方法即可1横排无非是本身标签是行内标签或者将块状标签添加浮动效果，然后变成横排排列。

程序输入如下 #menuoverflowhiddenheight20px#menuhover height100px 选择鼠标指针浮动在其上的元素，并设置其样式ahover backgroundcoloryellow 对于HTML 部分可以使用任何的 HTML 元。

5创建横向导航的样式 在style标签里添加一个样式类为navli，然后再navli类中设置样式背景颜色为红色，浮动为左浮动，内边框上下为8px左右为15px，列表属性为，字体颜色为白色样式代码为navlibackground。