英协网今天向大家介绍一种利用 css 和 ul、li 来制作的竖向菜单的方法。案例效果如下图所示。
首先，先在网页中插入项目列表：一种方法是在代码视图输入以下代码（下图）。图中的标签"<ul></ul>"是项目列表标签，"<li></li>"是列表项。"<a></a>"是超链接标签，而 href= "#"是制作了一个空链接，即只显示链接的效果，但却没有链接的地址。
另一种方法是选择[插入]菜单>HTML>文本对象>项目列表（如下图）。这样在设计视图中会出现一个默认的列表项，并且每回车一次，就会再增加一个列表项。
插入的列表效果如下图：
现在，要想达到本案例的效果，需要解决三个问题，分别是：①去掉项目列表符号；②添加边框和背景；③改变超链接的样式。下面我们依次解决。
1、去掉项目列表符号
列表符号的样式是 ul 的属性项，所以我们首先在 ul 的 CSS 代码中写入"list-style-type:none"，这是设置列表符号为无的 CSS 代码。如下图：
效果为：
2、添加边框和背景
要想为每一个列表项都添加边框和背景，可以将每一个列表项都看做是一个盒子，运用盒子模型概念，代码如下：
其中，ul 和 li 是标签名，其 css 样式不需引用，直接作用在网页中的<ul>和<li>标签中。而类".menu"需要引用，代码如下图：
此时效果为：
3、改变超链接样式，代码如下图所示：
效果完成！
全部的代码为：
以上就是本次文档的全部内容。希望对大家学习网页设计和 CSS 有所帮助。如果有某些地方我没有说清楚，请留言哦，我会尽可能的解答^_^
