css属性 list-style 纵向菜单、横向菜单

参考：ul li css 做横向菜单

菜单制作步骤：

• 1，建立一个无序列表
• 2，隐藏li的默认样式（因为看起来不是很好看，菜单通常都不需要li默认的圆点，我们给UL定义一个样式来消除这些圆点。） .test ul {list-style: none outside none;}
• 3，关键的浮动（此时默认显示的是纵向菜单，如果要变成横向菜单，那么必须给li增加浮动属性 .test li{float:left;}）
• 4，调整宽度（菜单都挤在一起不好看怎么办？我们来调节li的宽度。） .test li{float:left;width:100px;}
• 5，设置基本链接效果 .test a:link{color:#666;background:#CCC;text-decoration:none;} .test a:visited{color:#666;text-decoration:underline;} .test a:hover{color:#FFF; font-weight:bold;text-decoration:underline;background:#F00;}
• 6，将链接以块级元素显示（菜单链接的背景色为什么没有填满整个li的宽度？恩，解决的方法很简单，在a的样式定义中增加display:block，使链接以块级元素显示） .test a{display:block；text-align:center;height:30px;} .test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}

list-style属性：在一个声明中设置所有的列表（无序列表ul、有序列表ol）属性。
该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素，并由 list-item 元素继承。
可以按顺序设置如下属性：

• list-style-type
• list-style-position
• list-style-image

可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。

可能值：

• list-style-type 设置列表项标记的类型。参阅：list-style-type 中可能的值。
• list-style-position 设置在何处放置列表项标记。参阅：list-style-position 中可能的值。
• list-style-image 使用图像来替换列表项的标记。参阅：list-style-image 中可能的值。
• inherit 规定应该从父元素继承 list-style 属性的值。

list-style-type属性：设置列表项标记的类型。
可能值：

• none 无标记。
• disc 默认。标记是实心圆。
• circle 标记是空心圆。
• square 标记是实心方块。
• decimal 标记是数字。
• …参考http://www.w3school.com.cn/css/pr_list-style-type.asp

list-style-position 属性：设置在何处放置列表项标记。
该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。
可能值：

• outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
• inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
• inherit 规定应该从父元素继承 list-style-position 属性的值。

list-style-image 属性：使用图像来替换列表项的标记。
这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用 list-style-position 属性控制。
可能值：

• none 默认。无图形被显示。
• URL 图像的路径。
• inherit 规定应该从父元素继承 list-style-image 属性的值。