作者：阿捷
尽管在我的网站和文章里都有提到CSS制作菜单的方法，但很多初学者还是不太清楚如何实现，以及实现原理，我想专门写一篇详细教程会对大家比较有帮助。

我们先来看一个菜单的例子，最终效果是:

• 首页
• 产品介绍
• 服务介绍
• 技术支持
• 立刻购买
• 联系我们

 

然后我们来详细讲解步骤

第一步：建立一个无序列表

我们先建立一个无序列表，来建立菜单的结构。代码是：

<li><a href="http://www.dedecms.com/web-art/htmlbase/CSS/20060722/2">产品介绍</a></li>
<li><a href="http://www.dedecms.com/web-art/htmlbase/CSS/20060722/3">服务介绍</a></li>
<li><a href="http://www.dedecms.com/web-art/htmlbase/CSS/20060722/4">技术支持</a></li>
<li><a href="http://www.dedecms.com/web-art/htmlbase/CSS/20060722/5">立刻购买</a></li>
<li><a href="http://www.dedecms.com/web-art/htmlbase/CSS/20060722/6">联系我们</a></li>
</ul> <li><a href="http://www.dedecms.com/web-art/htmlbase/CSS/20060722/1">首页</a></li>
<li><a href="http://www.dedecms.com/web-art/htmlbase/CSS/20060722/2">产品介绍</a></li>
<li><a href="http://www.dedecms.com/web-art/htmlbase/CSS/20060722/3">服务介绍</a></li>
<li><a href="http://www.dedecms.com/web-art/htmlbase/CSS/20060722/4">技术支持</a></li>
<li><a href="http://www.dedecms.com/web-art/htmlbase/CSS/20060722/5">立刻购买</a></li>
<li><a href="http://www.dedecms.com/web-art/htmlbase/CSS/20060722/6">联系我们</a></li>
</ul> </div> <ul>
<li><a href="http://www.dedecms.com/web-art/htmlbase/CSS/20060722/1">首页</a></li>
<li><a href="http://www.dedecms.com/web-art/htmlbase/CSS/20060722/2">产品介绍</a></li>
<li><a href="http://www.dedecms.com/web-art/htmlbase/CSS/20060722/3">服务介绍</a></li>
<li><a href="http://www.dedecms.com/web-art/htmlbase/CSS/20060722/4">技术支持</a></li>
<li><a href="http://www.dedecms.com/web-art/htmlbase/CSS/20060722/5">立刻购买</a></li>
<li><a href="http://www.dedecms.com/web-art/htmlbase/CSS/20060722/6">联系我们</a></li>
</ul>
</div>

好了，主要步骤就是这7步，立刻拷贝和修改代码试试，你也可以用CSS做横向菜单了！

无忧CMS，5ucms.org建站仿站首选！