精通CSS.DIV网页样式与布局（七）——制作实用菜单
咱们这节主要讲解CSS如何制作网页中采用的菜单，其中包括项目列表、无需表格的菜单、菜单的横竖装换以及流行的Tab菜单。
我们首先看项目列表：列表的符号；我们看看代码：
当然我们还可以设置不同显示方式，大家自己来试试；尽管ul显示的是无符号列表，但是在CSS中一样能设置列表符号。我们的CSS不但可以制作列表的符号，我们接下来试试图片符号，我们先看看效果：
我们看到这个跟上面咱们说的列表符号就不一样了，这里采用了图片做符号。我们看一下这个代码：
我们在做网页的时候，有时候还需要横向的菜单来显示，而在CSS可以很轻松的进行横竖菜单的转换。我们先来看看效果：
我们来看看CSS代码：
<html><head><title>菜单的横竖转换</title><style><!--body{background-color:#ffdee0;}#navigation {font-family:Arial;}#navigation ul {list-style-type:none;/* 不显示项目符号 */margin:0px;padding:0px;}#navigation li {float:left;/* 水平显示各个项目 */}#navigation li a{display:block;/* 区块显示 */padding:3px 6px 3px 6px;text-decoration:none;border:1px solid #711515;margin:2px;}#navigation li a:link, #navigation li a:visited{background-color:#c11136;color:#FFFFFF;}#navigation li a:hover{/* 鼠标经过时 */background-color:#990020;/* 改变背景色 */color:#ffff00;/* 改变文字颜色 */}--></style> </head><body><div id="navigation"><ul><li><a href="#">Home</a></li><li><a href="#">My Blog</a></li><li><a href="#">Friends</a></li><li><a href="#">Next Station</a></li><li><a href="#">Contact Me</a></li></ul></div></body></html>首先这个body部分跟咱们刚才那个例子完全相同，所不同的仅仅是CSS的设置，便可以轻松的实现菜单的横竖转换，这就有利于我们在后期的维护中，如果我们需要把菜单从竖向转换成横向或者又横向转换成竖向，将十分的方便，这里就li属性float:left，而a属性还是一样设置边框等等。
通常在网页的设计中，经常的采用了ul，li来设置菜单，这很便于我们后期的维护。
