CSS网页布局入门教程14：纵向下拉及多级弹出式菜单- CSS样式表

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS网页布局入门教程14：纵向下拉及多级弹出式菜单

CSS样式表: CSS网页布局中文排版的9则技巧; 剖析网站的布局实例以及如何对其黄金分割; Float菜单水平居中简单方法; CSS网页制作教程:网页中常用的web安全字体; CSS网页制作教程:字体单位em简介; CSS网页制作:浮动清除的新方法; 收集分享的3个讲解css及标签的视频; CSS网页制作技巧:节约网页代码编写时间; 收集的6个关注CSS3的国外网站; CSS实例教程:reflow; CSS教程:需要知道的CSS3动画技术; 快速实时编辑网页代码的FireFOX和IE插件; 在IE6,IE7下变通实现pre-wrap; CSS圆角框进行JS封装; CSS教程:Mozilla建议的css书写顺序; 基于链接关系的微格式:使用rel属性; 非常酷的微格式：XFN规范; 为网页内容添加结构和语义的hAtom微格式; 网页简历结构和语义信息:hResume微格式; hCalendar微格式:关于事件和基于时间或地点的活动

No. « ‹ 103 104 105 106 › »

技术文章搜索

关键字

CSS样式表中的 CSS网页布局入门教程14：纵向下拉及多级弹出式菜单

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 79 ::

收藏到网摘: n/a

CSS网页布局入门教程13：下拉及多级弹出式菜单解读css发展历史

学完了上节教程，我想对于这于这节的学习就容易得多了。
横向菜单是通过div及JavaSprict实现下拉控制，纵向菜单呢？答案是肯定的。我们现在要做的就是一个纵向菜单，css代码：
ul { margin:0; padding:0; list-style:none; width:120px; border-bottom:1px solid #ccc; font-size:12px;}
ul li { position:relative;}
li ul { position:absolute; left:119px; top:0; display:none;}
ul li a { width:108px; display:block; text-decoration:none; color:#666666; background:#fff; padding:5px; border:1px solid #ccc; border-bottom:0px;}
ul li a:hover { background-color:#ddd;}
/*解决ul在IE下显示不正确的问题*/
* html ul li { float:left; height:1%;}
* html ul li a { height:1%;}
/* end */
li:hover ul,li.over ul { display:block;}

css代码的编写基本上保持了与横向导航相同的思路，不同的是，为了实现导航中的了导航与主导航在实现鼠标交互的同时，保持其相对位置一致，我们使用了对ul li{}使用了position:relative;使其定位方式转为相对定位。而对li ul{}即子导航采用了position:absolute;相对于导航的绝对定位方式，了其鼠标交互后的位置一致。
也许您已经发现，这里在css代码未尾增加了一段注释的定义* html ul li 与* html ul li a。这里用到的是CSS hack，这是因为不同的浏览器对代码的解析不同，用来实现在各浏览器上显示相同的效果而使用的。这段代码只有IE浏览器能解析，其它浏览器视而不见。
本例的最终显示效果如下：

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>下拉纵向及多级弹出式菜单www.aa25.cn</title>
<script type="text/javascript"><![CDATA[//><!]]></script>
<style>
ul { margin:0; padding:0; list-style:none; width:120px; border-bottom:1px solid #ccc; font-size:12px;}
ul li { position:relative;}
li ul { position:absolute; left:119px; top:0; display:none;}
ul li a { width:108px; display:block; text-decoration:none; color:#666666; background:#fff; padding:5px; border:1px solid #ccc; border-bottom:0px;}
ul li a:hover { background-color:#ddd;}
/*解决ul在IE下显示不正确的问题aa25.cn*/
* html ul li { float:left; height:1%;}
* html ul li a { height:1%;}
/* end */
li:hover ul,li.over ul { display:block;}
</style>
</head>
<body>
<ul id="nav"> <li><a href="">文章</a> <ul> <li><a href="">CSS教程</a></li> <li><a href="">DOM教程</a></li> <li><a href="">XML教程</a></li> <li><a href="">FLASH教程</a></li> </ul> </li> <li><a href="">参考</a> <ul> <li><a href="">XHTML</a></li> <li><a href="">XML</a></li> <li><a href="">CSS</a></li> </ul> </li> <li><a href="">BLOG</a> <ul> <li><a href="">全部</a></li> <li><a href="">网页技术</a></li> <li><a href="">UI技术</a></li> <li><a href="">FLASH技术</a></li> </ul> </li> <li><a href="">摇滚</a></li> <li><a href="">纯音乐</a></li> <li><a href="">古典金曲</a></li> <li><a href="">电影原声</a></li>
</ul>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

CSS网页布局入门教程13：下拉及多级弹出式菜单解读css发展历史

CSS样式表 中的 CSS网页布局入门教程14：纵向下拉及多级弹出式菜单

评论 (0) All

CSS样式表中的 CSS网页布局入门教程14：纵向下拉及多级弹出式菜单