精通CSS+DIV：用CSS制作菜单

[b]一、item list[/b]
1,列表符号
[code]
ul {
list-style-type: decimal;
}
li.special {
list-style-type: circle;
}

disc
circle
square
decimal
upper-alpha
lower-alpha
upper-roman
lower-roman
none
[/code]

2,图片符号
[code]
ul {
list-style-image: url(icon1.jpg);
}

or

ul {
list-style-type: none;
}
li {
background: url(icon1.jpg) no-repeat;
padding-left: 25px;
}
[/code]

[b]二、no table menu[/b]
[code]
<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>

#navigation {
width: 200px;
}

#navigation ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

#navigation li {
border-bottom: 1px solid #ED9F9F;
}

#navigation li a {
display: block;
padding: 5px 5px 5px 0.5em;
text-decoration: none;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
}

#navigation li a:link, #navigation li a:visited {
background-color: #c11136;
color: #FFFFFF;
}
#navigation li a:hover {
background-color: #990020;
color: #FFFF00;
}
[/code]

[b]三、横向和纵向菜单[/b]
[code]
#navigation li {
float: left;
}
[/code]

[b]四、Tab菜单[/b]
[code]
<ul id="tabnav">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="content">
</div>

li.current {
border-bottom: 1px solid #FFFFFF;
color: #000000;
background-color: #FFFFFF;
}
[/code]
即当前访问的tab菜单弄成白色下边框和白色背景，这样就将下边带边框的content div的边框覆盖一部分，所以看起来就是tab菜单了