UL LI结构实现二级导航菜单(HTML+CSS+JS)

http://blog.digitalforest.cn/cssdivulli-nav

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

改善网站导航文章，有兴趣的话阅读：

网站分析工具维析路径分析帮你清晰导航

网站导航分析之不要让我迷路（上篇）

网站导航分析之不要让我迷路（下篇）