html代码

利用CSS的浮动属性，可以很容易的制作网上常见的横向菜单。

打开我们的小例子index.html，我们将利用CSS的浮动属性把导航菜单做成横向菜单。导航部分的htnl代码如下：

可以看出，首先是一个 id="header" 的div，包含了网站的logo图标和 id="menu" 网站菜单div。

标签标出了网站首页，多个

标签列出了网站的菜单。

如下图所示，没有定义CSS，就是普通的由上至下文档流方式：

注意我们在《改进的小例子-5》中已经做了全局基本设定，所以上图显示的是设定后的效果。

定义header及logo

如果您只是想了解横向菜单的制作，这一步可以略过。教程里有这一步，是为了同时完善整个例子的header标签。

定义header及logo：

/*header*/

#header{

width: 100%;

height: 70px;

background: url(../images/header_bg.gif) repeat-x bottom;

float: left;

}

.logo{

width:310px;

height:60px;

margin: 5px 0 0 10px;

float: left;

}

语法分析

首先定义header的宽度及高度，为了增加层次感，还给header标签设定了背景图案

定义了.logo，用于定义网站logo图片的位置

效果如下所示：

从图上可以看出，由于浮动的效果，menu这个div已经包含在header内了而不是普通的文档流布局。

定义menu

/*munu*/

#menu{

width: 500px;

height: 38px;

margin: 16px auto 0 20px;

float: right;

}

#menu h2{

width: 100px;

text-align: center;

float: left;

}

语法分析

首先定义menu的宽度及高度，并且向右浮动

定义了每一个h2标签的宽度，文字居中，然后关键的使用float属性让3个h2标签横向排列

效果如下所示：

从图上可以看出，已经基本达到了横向菜单的效果，下面就对菜单做进一步装饰。

定义标签

#menu a{

width: 99px;

line-height: 24px;

font-weight: normal;

color: #FFFFFF;

background: #ff3300;

display: block;

}

#menu a:hover{

font-weight: bold;

text-decoration: none;

color: #FFFFFF;

background: #800000;

}

语法分析

首先定义标签的效果，定义宽度，选择合适的行高，字体颜色，背景色等

定义标签关键的一步是display: block属性设置，它让标签以块级元素显示，这样定义的宽度才有效

下面定义了一个伪类，显示鼠标放上去的效果(下图紫色为鼠标放上去菜单效果)

可以利用背景图片代替背景色以制作出更炫的效果

效果如下所示：

至此，已经完成了横向菜单的制作，您可以发挥自己的想象，制作出更漂亮的菜单效果来。有的网站不是用h2标签而以li标签列出菜单列表，其制作原理是一样的。