本文通过实际的例子利用CSS+DIV+UL+LI来实现一个兼容各大浏览器的导航菜单。阅读完后，根据你自己的需求加以改善，做出一个属于自己的导航。
由于HTML代码和CSS代码都比较基础，不对代码做详细解释。代码看不懂也没有关系，先“糊里糊涂”按部就班的看下去，“难得糊涂”也是一种境界，之后看看【附录2】弥补一下欠缺的知识就可以了。
在这个过程中请您注意每个步骤与上一步骤的区别。（注：红色部分是在其上一步骤追加的部分）效果预览如下：
（本例子在FireFox13.0、IE8.0\IE9.0\IE10.0、Opara12、Chrome19.0、Safari5.17下实验通过）
（版权归数码林网站分析博客所有，欢迎转载，但转载请注明出处。）
1. 创建无序列表：
<div>
<ul>
<li><a target="_blank" href="http://www.baidu.com">菜单例一</a></li>
<li><a target="_blank" href="http://www.google.com">菜单例二</a></li>
<li><a target="_blank" href="http://www.bing.com">菜单例三</a></li>
<li><a target="_blank" href="http://www.jike.com">菜单例四</a></li>
<li><a target="_blank" href="http://www.soso.com">菜单例五</a></li>
<li><a target="_blank" href="http://www.youdao.com">菜单例六</a></li>
</ul>
</div>
【点击这里查看效果】
2. 将“li”默认样式“圆点”利用CSS隐藏：
<style type="text/css">
.ullicss ul{list-style:none;}
</style>
<div class="ullicss">
<ul>
<li><a target="_blank" href="http://www.baidu.com">菜单例一</a></li>
<li><a target="_blank" href="http://www.google.com">菜单例二</a></li>
<li><a target="_blank" href="http://www.bing.com">菜单例三</a></li>
<li><a target="_blank" href="http://www.jike.com">菜单例四</a></li>
<li><a target="_blank" href="http://www.soso.com">菜单例五</a></li>
<li><a target="_blank" href="http://www.youdao.com">菜单例六</a></li>
</ul>
</div>
【点击这里查看效果】
3. 通过浮动使 “li”元素横向排列：
<style type="text/css">
.ullicss ul{list-style:none;}
.ullicss li{float:left;}
</style>
<div class="ullicss">
<ul>
<li><a target="_blank" href="http://www.baidu.com">菜单例一</a></li>
<li><a target="_blank" href="http://www.google.com">菜单例二</a></li>
<li><a target="_blank" href="http://www.bing.com">菜单例三</a></li>
<li><a target="_blank" href="http://www.jike.com">菜单例四</a></li>
<li><a target="_blank" href="http://www.soso.com">菜单例五</a></li>
<li><a target="_blank" href="http://www.youdao.com">菜单例六</a></li>
</ul>
</div>
【点击这里查看效果】
4. 调整“li”元素的宽度：
<style type="text/css">
.ullicss ul{list-style:none;}
.ullicss li{float:left; width:100px;}
</style>
<div class="ullicss">
<ul>
<li><a target="_blank" href="http://www.baidu.com">菜单例一</a></li>
<li><a target="_blank" href="http://www.google.com">菜单例二</a></li>
<li><a target="_blank" href="http://www.bing.com">菜单例三</a></li>
<li><a target="_blank" href="http://www.jike.com">菜单例四</a></li>
<li><a target="_blank" href="http://www.soso.com">菜单例五</a></li>
<li><a target="_blank" href="http://www.youdao.com">菜单例六</a></li>
</ul>
</div>
【点击这里查看效果】
5. 通过CSS伪类设置菜单效果：
<style type="text/css">
.ullicss ul{list-style:none;}
.ullicss li{float:left; width:100px;}
.ullicss a:link {color:pink; font-weight:bold; text-decoration:none; background:green;}
.ullicss a:visited{color:pink; font-weight:bold; text-decoration:none; background:green;}
.ullicss a:hover {color:green; font-weight:bold; text-decoration:none; background:yellow;}
</style>
<div class="ullicss">
<ul>
<li><a target="_blank" href="http://www.baidu.com">菜单例一</a></li>
<li><a target="_blank" href="http://www.google.com">菜单例二</a></li>
<li><a target="_blank" href="http://www.bing.com">菜单例三</a></li>
<li><a target="_blank" href="http://www.jike.com">菜单例四</a></li>
<li><a target="_blank" href="http://www.soso.com">菜单例五</a></li>
<li><a target="_blank" href="http://www.youdao.com">菜单例六</a></li>
</ul>
</div>
【点击这里查看效果】（ 提示：将鼠标放在菜单上看看）
6. 将链接以块级元素显示并细微调整：
<style type="text/css">
.ullicss ul{list-style:none;}
.ullicss li{float:left; width:100px; margin-left:3px; line-height:30px;}
.ullicss a:link {color:pink; font-weight:bold; text-decoration:none; background:green;}
.ullicss a:visited{color:pink; font-weight:bold; text-decoration:none; background:green;}
.ullicss a:hover {color:green; font-weight:bold; text-decoration:none; background:yellow;}
.ullicss a {display:block; text-align:center; height:30px;}
</style>
<div class="ullicss">
<ul>
<li><a target="_blank" href="http://www.baidu.com">菜单例一</a></li>
<li><a target="_blank" href="http://www.google.com">菜单例二</a></li>
<li><a target="_blank" href="http://www.bing.com">菜单例三</a></li>
<li><a target="_blank" href="http://www.jike.com">菜单例四</a></li>
<li><a target="_blank" href="http://www.soso.com">菜单例五</a></li>
<li><a target="_blank" href="http://www.youdao.com">菜单例六</a></li>
</ul>
</div>
CSS调整解释：
text-align:center：将菜单文字居中；
height:30px：增加背景的高度；
margin-left:3px：使每个菜单之间空3px距离；
line-height:30px：定义行高，使链接文字纵向居中
【点击这里查看效果】
7. 进一步调整：
<style type="text/css">
.ullicss {height:30px;background:green;}
.ullicss ul{list-style:none;}
.ullicss li{float:left; width:100px; margin-left:3px; line-height:30px;}
.ullicss a:link {color:pink; font-weight:bold; text-decoration:none; background:green;}
.ullicss a:visited{color:pink; font-weight:bold; text-decoration:none; background:green;}
.ullicss a:hover {color:green; font-weight:bold; text-decoration:none; background:yellow;}
.ullicss a {display:block; text-align:center; height:30px;}
</style>
<div class="ullicss">
<ul>
<li><a target="_blank" href="http://www.baidu.com">菜单例一</a></li>
<li><a target="_blank" href="http://www.google.com">菜单例二</a></li>
<li><a target="_blank" href="http://www.bing.com">菜单例三</a></li>
<li><a target="_blank" href="http://www.jike.com">菜单例四</a></li>
<li><a target="_blank" href="http://www.soso.com">菜单例五</a></li>
<li><a target="_blank" href="http://www.youdao.com">菜单例六</a></li>
</ul>
</div>
【点击这里查看效果】
（版权归数码林网站分析博客所有，欢迎转载，但转载请注明出处。）
【小 结】
本例子通过将无序列表浮动并加以修饰得到一个横向导航菜单。
【留个思考题】
如果将遇到的将CSS中的“background”和“color”用“background-image”代替是不是会得到更好的效果呢？
如果图片利用合理，你会创造出更好的导航菜单！这里请读者自己动手实践吧！
【附录1： 本文用到的相关示例代码下载】
点击下载：ULLICSS_HTML.zip
【附录2： 相关知识参考】
无序列表 ：http://www.w3school.com.cn/html/html_lists.asp
CSS列表 ：http://www.w3school.com.cn/css/css_list.asp
CSS浮动 ：http://www.w3school.com.cn/css/css_positioning_floating.asp
CSS背景 ：http://www.w3school.com.cn/css/css_background.asp
CSS文本 ：http://www.w3school.com.cn/css/css_text.asp
CSS伪类 ：http://www.w3school.com.cn/css/css_pseudo_classes.asp
CSS display 属性 ：http://www.w3school.com.cn/css/pr_class_display.asp
CSS完整教程 ：http://www.w3school.com.cn/css/index.asp
HTML完整教程 ：http://www.w3school.com.cn/html/index.asp
改善网站导航文章，有兴趣的话阅读：
相关推荐
div+css+ul-li制作横向导航栏，简洁清楚。原理清楚，适合学习。
3.jquery+css实现简洁两级横向导航菜单,带动态效果 4.jQuery+CSS实现竖形动感导航菜单效果 5.jquery+div漂亮SmartMenu下拉菜单气泡透明效果 6.jQuery+div实现flash炫彩菜单插件下载 7.jquery+div实用漂亮...
目的很简单：有一个 ul>li 列表，默认为单列显示，把它变为两列显示。 方法1，使用DIV+CSS代码： 复制代码代码如下: <... <div> <ul> <li>ABC</li> <li>ABC</li> <li>ABC</li> <li>ABC</li> <li>ABC</li>
5.11 一个横向导航菜单的制作 5.11.1 菜单原理 5.11.2 制作菜单内容和结构部分 5.11.3 CSS 代码编写 5.12 清除浮动 5.12.1 清除浮动属性详解 5.12.2 清除浮动属性的使用 第6 章 CSS 定义文本属性 第123 页 6.1 文本...
此代码内容为巧克力jQuery横向二级滑动导航菜单，属于站长常用代码，更多菜单导航代码请访问懒人图库JS代码频道。" /> 巧克力jQuery横向二级滑动导航菜单_懒人图库 <link href="css/lrtk.css" rel="stylesheet" type...
横向滚动图源代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <style type="text/css"> *{margin:0;padding:0;} ul{list-style:none} #wrap{...
对话一横导航链接为什么要用UL LI为什么不直接在一行写上文本链接呢 列表本身就有列表符号，同时列表项也要分行显示做成横向的，既要使得不显示列表符号，又要将他们内嵌到一行。————————————————...
目前支持的是竖向与横向滚动 http://lgyweb.com/marScroll/ 现在分析下无间缝实现的基本思路（竖向例子）： HTML结构： 代码如下: <div id=”marScroll”> <ul> <li>01</li> <li>02</li> <li>03</li> <li>04</li> ...
ex:div,h1-h6,p,ul,li,ol,dl,dt,dd 2.行内元素允许修改尺寸 表单控件元素 3.本身具备width和height属性的元素 ex:img,table 注意：大部分行内元素不能修改 span,a,i,u,b,s 3.溢出处理 当内容多，元素区域小...
（1）块级元素 div p h1-h6 ul ol li ①独占一行 ②宽度 高度 外边距 内边距都可控制 ③宽度默认是容器（父级元素）100%的宽度 ④是一个容器及盒子 里面看可以放行内或块级元素 ⑤文字类的元素如p h1-h6里面不...
每日分享效果，今天分享内容为：jQuery鼠标滑过横向时间轴样式 效果图： HTML代码： `<!DOCTYPE html> <html> <head> <title></title> <link rel=stylesheet type=text/css href=...
将之前的用css3+jq实现的横向树样式简单封装成组件使用到vue项目中，文件名为transverseTree.vue 代码： <div class=tree> <ul v-if=treeData> <li v-for=(column,index)> <span class=root>{{column.name}} ...
Easy Slider 是一个滑动门插件，支持任何图片或内容，当点击时实现横向或纵向滑动。它拥有一系列丰富的参数设置，可通过CSS来进行完全的控制。... 首先是html标记 代码如下: <div id=”slider”> <ul> <li>conte
横导航链接为什么要用UL LI为什么不直接在一行写上文本链接呢 列表本身就有列表符号，同时列表项也要分行显示做成横向的，既要使得不显示列表符号，又要将他们内嵌到一行。————————————————————...
<div align="center" id="container" title="这是一个div"></div> 四大标准属性： 1、id ：定义元素在页面中独一无二的名称 2、title ：鼠标悬停在元素上时，体现的文字 3、class ：引用 类选择器时使用(CSS中)...