通过实例来给大家介绍：怎么使用(X)HTML中的<UL>标签来制作一个横向导航菜单。
为什么大家都采用<ul>标签来制作导航栏和菜单栏呢？
主要是因为代码清晰，布局方便，更重要的是具有“语义”效果，方便进一步SEO。
第一步、编写横向菜单的HTML代码架构
将以下代码添加到HTML文档的导航栏区域中。
复制代码 代码示例:
<ul id="menu"><li><a href="http://www.baidu.com">Baidu.Com</a></li><li><a href="http://www.Code52.Net">Code52.Net</a></li><li><a href="http://www.yahoo.com">Yahoo.Com</a></li><li><a href="http://www.google.com" class="last">Google.Com</a></li></ul>
第二步、编写CSS代码
1、设置公共样式
将以下CSS代码添加到HTML文档的<head>...</head>标签范围中。
复制代码 代码示例:
<style type="text/css">#menu { font:12px verdana, arial, sans-serif; }#menu, #menu li {list-style:none; padding:0; margin:0; }</style>
<ul>中的各条目<li>默认都是纵向排列的，需要定义CSS来让其横向排列。
因为我们现在将导航栏拉出来独立讲解，所以需要设置一些公共样式，如果在 body 或其他地方已经重设了默认效果，以上可以去掉
2、让文字横排
<ul>标签下的项目<li>默认是纵向排列的，需要定义额外的CSS属性让其横向排列。
复制代码 代码示例:
<style type="text/css">#menu li { float:left; }</style>
3、设置链接样式：
复制代码 代码示例:
<style type="text/css">#menu li a {display:block; padding:8px 50px; background:#3A4953; color:#fff; text-decoration:none; border-right:1px solid #000; }</style>
用内边距（即填充padding）的方式，让菜单变得宽一些，如果菜单是中英文混排的，建议设置单个菜单的高宽，可以避免中英文字符行高不一导致的高度误差。
设置固定高度的方式：
复制代码 代码示例:
<style type="text/css">#menu li a {display:block; width:150px; height:30px;
line-height:30px; text-align:center; background:#3A4953; color:#fff; text-decoration:none; border-right:1px solid #000; }</style>
4、链接悬停效果：
通过以上几步，一个横向导航栏的初步框架完成了。此步定义链接的悬停效果，让导航栏更美观。可以在CSS悬停属性上定义背景图片。
复制代码 代码示例:
<style type="text/css">#menu li a:hover {background:#146C9C; color:#fff; }</style>
这里代码的一个缺陷，最右边会多出来一个边框，由于 :first-child 伪类不被IE系列浏览器所支持，只能单独写一个样式，将最后一个边框去掉，同时要给 HTML 代码增加一个额外选择符。
复制代码 代码示例:
<ul id="menu"><li><a href="http://www.baidu.com">Baidu.Com</a></li><li><a href="http://www.Code52.Net">Code52.Net</a></li><li><a href="http://www.yahoo.com">Yahoo.com</a></li><li><a href="http://www.google.com" class="last">Google.com</a></li></ul> <style type="text/css">#menu li a.last {border-right:0; }</style>
到这里简单的横向导航菜单就制作完成，下面是完整代码：
复制代码 代码示例:
<style type="text/css">#menu { font:12px verdana, arial, sans-serif; }#menu, #menu li {list-style:none;padding:0;margin:0;}#menu li { float:left; }#menu li a {display:block; padding:8px 50px;background:#3A4953;color:#fff;text-decoration:none;border-right:1px solid #000;}#menu li a:hover {background:#146C9C;color:#fff;text-decoration:none;border-right:1px solid #000;}#menu li a.last border-right:0; }</style> <ul id="menu"><li><a href="http://www.baidu.com">Baidu.Com</a></li><li><a href="http://www.Code52.Net">Code52.Net</a></li><li><a href="http://www.yahoo.com">Yahoo.com</a></li><li><a href="http://www.google.com" class="last">Google.com</a></li></ul>
