本文通过实际的例子利用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`，我们可以轻松地创建出具有专业外观的横向导航栏。随着技术的发展，可以进一步探索更高级的布局技巧和动态效果，以满足不断进化的网页设计需求。
- **纵向菜单**：通过垂直排列的列表项（`<ul>`和`<li>`）来实现。 - **横向菜单**：通过水平排列的列表项来实现，通常需要使用`display: inline-block;`或`float`属性来控制布局。 #### 八、XHTML与CSS校验 - **...
本主题将深入探讨如何使用CSS + DIV进行布局控制，特别是如何创建和管理菜单。CSS提供了强大的样式控制能力，而DIV作为一个无语义的容器，能够帮助我们组织和定位页面内容。现在，我们将详细讨论这两个技术在菜单...
**横向菜单**: 同样使用`<ul>`和`<li>`，通过CSS控制水平布局。 #### 十四、校验及常见错误 - **XHTML校验**: 使用W3C提供的在线工具检查文档是否符合规范。 - **CSS2校验**: 同样使用W3C的CSS验证服务来检测CSS...
3.jquery+css实现简洁两级横向导航菜单,带动态效果 4.jQuery+CSS实现竖形动感导航菜单效果 5.jquery+div漂亮SmartMenu下拉菜单气泡透明效果 6.jQuery+div实现flash炫彩菜单插件下载 7.jquery+div实用漂亮...
总结来说，使用纯div+css制作水平三级横向弹出菜单主要涉及HTML结构设计、CSS定位技巧以及利用`:hover`伪类实现交互效果。理解并掌握这些基础概念，可以为网页开发中的导航菜单设计打下坚实的基础。在实际项目中，还...
【div+css】3级横向导航菜单是一种常见的网页布局技术，用于创建清晰、直观的网站导航结构。在网页设计中，导航菜单是用户与网站交互的关键元素，它帮助用户快速定位到他们感兴趣的内容。本教程将详细介绍如何使用...
在网页布局设计中，我们经常需要将`<ul>`列表中的`<li>`元素横向排列，以便创建导航栏或其他水平展示的内容。本文将详细介绍两种利用CSS实现`<ul>`和`<li>`横向排列的方法。 ### 方法一：使用`float:left` 首先，...
- 主菜单项通过`.nav ul li`设置宽度、高度、边框等样式，并使其浮动以实现横向排列。 - 二级菜单项通过`:hover`伪类在鼠标悬停时显示。 #### 五、总结 通过以上步骤，您可以成功地使用HTML和CSS创建一个二级...
在IT领域，尤其是在前端开发中，构建树状图是一种常见的需求，它用于展示层次结构的数据，比如文件系统、组织架构或者导航菜单等。本教程主要介绍如何使用JavaScript和CSS技术来实现一个简单的树状图。 首先，我们...
目的很简单：有一个 ul>li 列表，默认为单列显示，把它变为两列显示。 方法1，使用DIV+CSS代码： 复制代码代码如下: <... <div> <ul> <li>ABC</li> <li>ABC</li> <li>ABC</li> <li>ABC</li> <li>ABC</li>
本示例将向您展示如何利用HTML的`<ul>`和`<li>`标签，结合CSS来构建一个横向的导航菜单。这种方法不仅结构清晰，而且易于定制和维护。 首先，我们来看一下HTML结构。在示例中，使用了`<div>`元素作为容器，其ID为...
【CSS横向导航菜单】是一种常见的网页布局元素，用于在页面顶部提供多个链接或选项，方便用户快速访问网站的不同部分。创建CSS横向导航菜单的核心在于利用CSS（层叠样式表）来控制HTML元素的布局和样式，使其水平...
- **不用表格的菜单（纵向）**：使用列表项（`<ul><li>`）配合CSS实现垂直导航菜单。 - **不用表格的菜单（横向）**：同样使用列表项配合浮动或flex布局实现水平导航菜单。 #### 十二、校验及常见错误 - **XHTML...
例如，`<ul>`和`<li>`元素常用于构建导航条，`<div>`用于包裹下拉菜单。同时，为了保证兼容性，开发者可能需要使用浏览器前缀，如 `-webkit-`、`-moz-` 等。 `images`文件夹可能包含了导航条中的背景图片、图标或者...
在网页设计中，导航菜单是不可或缺的部分，它帮助用户快速浏览和访问网站的不同部分。本教程将深入探讨如何使用jQuery创建一个既可横向又能纵向滑动的完美菜单，这种效果可以极大提升用户体验，使得网站更加互动和...
### DIV+CSS下拉菜单详解 #### 知识点一：HTML与CSS结合实现下拉菜单 在网页设计中，导航栏是用户交互的关键部分，其中下拉菜单因其节省空间且直观的特点而广受欢迎。本案例展示了一种利用HTML与CSS结合实现下拉...
在网页设计与开发领域，导航菜单是任何网站不可或缺的一部分，它不仅关乎用户体验，还直接影响着网站的整体美观度。本文将深入解析一个微软风格的CSS横向菜单的设计思路和技术要点。 #### 菜单特点 此款微软风格的...
一个简单的横向导航菜单通常由一个顶级`<ul>`元素和多个`<li>`元素组成，每个`<li>`元素内包含一个链接（`<a>`）。二级下拉菜单则可以嵌套在一级菜单的`<li>`元素中，通常使用`<div>`或`<ul>`来实现。 接下来，我们...
### DIV+CSS实现横向滚动的布局 - **DIV元素的使用**：DIV是一个块级元素，可以用来创建文档中的分区或节。在本例中，DIV用于创建滚动区域，通过给DIV设置固定的宽度和高度，可以控制滚动区域的大小。 - **CSS样式...