来谈谈：纯CSS制造级联菜单

只看该作者 · 发表于 2015-1-15 23:55:26

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站。
网页制造poluoluo文章简介：级联菜单利用了纯CSS的体例.

介入测试的扫瞄器：IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2
操纵体系：Windows
蓝色幻想典范论坛首发，转载请说明出处

此次给项目做的级联菜单利用了纯CSS的体例，霍霍，能用CSS做的，就用CSS完成吧。
早已有先辈完成过如许的实例了，我觉得我能顺遂完成，但没想各处处受阻，故纪录一点心得以下，供人人参阅。
空话未几说，咚咚咚，入手下手制造啦！
除IE6这个刚强的孩子，其他扫瞄器霸占仍是对照简单的。
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="Chomo"/><linkrel="start"href="http://www.14px.com"title="Home"/><title>三级级联菜单</title><styletype="text/css">*{margin:0;padding:0;list-style:none;}.c_subNav{width:150px;}.c_subNava{text-decoration:none;color:#333;}.c_subNava:hover{color:#f60;}.c_subNavulul{position:absolute;display:none;right:-150px;top:-1px;}.c_subNavli{border-bottom:1pxsolid#ccc;position:relative;_position:static;float:left;width:100%;}.c_subNava.li{position:relative;}.c_subNavli.option{display:block;line-height:15px;padding:5px5px5px25px;background:no-repeat5px4px;cursor:pointer;font:12pxVerdana;zoom:1;background:url(http://www.14px.com/wp-content/uploads/2009/05/ico.gif)no-repeat;}.c_subNavli.option:hover{color:#f60;background-color:#ffa;}.c_subNavli.optionspan{display:block;padding-right:15px;background:url(http://www.14px.com/wp-content/uploads/2009/05/ico.gif)no-repeatright0;}.c_subNavli.option:hoverspan{background-position:right-15px;}.c_subNav.li:hover{z-index:2;background:transparent;}.c_subNav.li:hoverul{display:block;}.c_subNav.li:hoverulul{display:none;}.c_subNav.li:hoverul{border:1pxsolid#ccc;border-width:1px2px2px1px;width:150px;background:#fff;padding:1px;}.c_subNav.li:hoverli{border-bottom:none;}.c_subNav.li:hoverli.option{padding:2px5px;background:transparent;}.c_subNav.li:hoverli.option:hover{background:#0096ff;color:#fff;}.c_subNav.li:hoverli.option:hoverspan{background-position:right-30px;}.c_subNav.li:hover.li:hoverul{display:block;left:145px;top:-2px;}.c_subNav.charges.option{background-position:4px-45px;}.c_subNav.biz.option{background-position:4px-70px;}.c_subNav.change.option{background-position:4px-95px;}.c_subNav.score.option{background-position:4px-120px;}.c_subNav.server.option{background-position:4px-145px;}.c_subNav.edit.option{background-position:4px-170px;}.c_subNav.sms.option{background-position:4px-195px;}</style></head><body><divclass="c_subNav"><ul><liclass="licharges"><ahref="#nogo"class="option"><span>话费服务</span></a><ul><liclass="li"><ahref="#nogo"class="option"><span>话费查询</span></a><ul><liclass="li"><ahref="#nogo"class="option">及时话费查询</a></li><liclass="li"><ahref="#nogo"class="option">话费余额查询</a></li><liclass="li"><ahref="#nogo"class="option">月账单查询</a></li><liclass="li"><ahref="#nogo"class="option">月详单查询</a></li><liclass="li"><ahref="#nogo"class="option">缴费汗青查询</a></li><liclass="li"><ahref="#nogo"class="option">资费优选保举</a></li></ul></li><liclass="li"><ahref="#nogo"class="option"><span>定制话费信息</span></a><ul><liclass="li"><ahref="#nogo"class="option">定制短信账单</a></li><liclass="li"><ahref="#nogo"class="option">话费余额短信提示</a></li><liclass="li"><ahref="#nogo"class="option">定制Email账单</a></li></ul></li><liclass="li"><ahref="#nogo"class="option"><span>网上交费</span></a><ul><liclass="li"><ahref="#nogo"class="option">网上缴费</a></li><liclass="li"><ahref="#nogo"class="option">充值卡缴费</a></li></ul></li></ul></li><liclass="libiz"><ahref="#nogo"class="option"><span>营业打点</span></a><ul><liclass="li"><ahref="#nogo"class="option"><span>一样平常营业打点</span></a><ul><liclass="li"><ahref="#nogo"class="option">来电显现</a></li><liclass="li"><ahref="#nogo"class="option">呼唤守候</a></li><liclass="li"><ahref="#nogo"class="option">呼唤转移</a></li><liclass="li"><ahref="#nogo"class="option">三方通话</a></li><liclass="li"><ahref="#nogo"class="option">来电提示</a></li><liclass="li"><ahref="#nogo"class="option">呼唤坚持</a></li><liclass="li"><ahref="#nogo"class="option">呼唤转移设置</a></li><liclass="li"><ahref="#nogo"class="option">主叫埋没</a></li><liclass="li"><ahref="#nogo"class="option">彩铃</a></li><liclass="li"><ahref="#nogo"class="option">国际周游</a></li><liclass="li"><ahref="#nogo"class="option">短信回执</a></li><liclass="li"><ahref="#nogo"class="option">12580综合信息</a></li><liclass="li"><ahref="#nogo"class="option">关爱一线通</a></li></ul></li><liclass="li"><ahref="#nogo"class="option"><span>数据营业</span></a><ul><liclass="li"><ahref="#nogo"class="option">手机上彀</a></li><liclass="li"><ahref="#nogo"class="option">GPRS</a></li><liclass="li"><ahref="#nogo"class="option">飞信</a></li><liclass="li"><ahref="#nogo"class="option">手机报</a></li><liclass="li"><ahref="#nogo"class="option">无线音乐俱乐部</a></li><liclass="li"><ahref="#nogo"class="option">手机邮箱</a></li><liclass="li"><ahref="#nogo"class="option">号簿管家</a></li><liclass="li"><ahref="#nogo"class="option">WLAN营业</a></li><liclass="li"><ahref="#nogo"class="option">彩乐短信</a></li></ul></li><liclass="li"><ahref="#nogo"class="option"><span>手机报停/报开</span></a><ul><liclass="li"><ahref="#nogo"class="option">手机报停</a></li><liclass="li"><ahref="#nogo"class="option">手机复机</a></li></ul></li><liclass="li"><ahref="#nogo"class="option">梦网查询与退订</a></li></ul></li><liclass="lichange"><ahref="#nogo"class="option"><span>套餐打点与变动</span></a><ul><liclass="li"><ahref="#nogo"class="option">GPRS套餐变动</a></li><liclass="li"><ahref="#nogo"class="option">产物变动</a></li></ul></li><liclass="liscore"><ahref="#nogo"class="option"><span>积分企图</span></a><ul><liclass="li"><ahref="#nogo"class="option">积分查询</a></li><liclass="li"><ahref="#nogo"class="option">积分兑换</a></li><liclass="li"><ahref="#nogo"class="option">积明白细查询</a></li><liclass="li"><ahref="#nogo"class="option">积分兑换话费</a></li><liclass="li"><ahref="#nogo"class="option">积分兑换汗青查询</a></li></ul></li><liclass="liserver"><ahref="#nogo"class="option"><span>在线客服</span></a><ul><liclass="li"><ahref="#nogo"class="option">号码回属地查询</a></li><liclass="li"><ahref="#nogo"class="option">业务厅查询</a></li><liclass="li"><ahref="#nogo"class="option">手机仿真</a></li><liclass="li"><ahref="#nogo"class="option">在线征询</a></li></ul></li><liclass="liedit"><ahref="#nogo"class="option"><span>团体信息办理</span></a><ul><liclass="li"><ahref="#nogo"class="option">团体材料修正</a></li><liclass="li"><ahref="#nogo"class="option">服务暗码变动</a></li><liclass="li"><ahref="#nogo"class="option">服务暗码重置</a></li><liclass="li"><ahref="#nogo"class="option">PUK码查询</a></li><liclass="li"><ahref="#nogo"class="option">套餐利用形态查询</a></li><liclass="li"><ahref="#nogo"class="option">营业守旧形态查询</a></li></ul></li><liclass="lisms"><ahref="#nogo"class="option">短信息服务</a></li></ul></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
该实例完成也许就两个要点：

忌浮忌躁，一步步来，先把最初级的display:none;做。
“:hover伪类”的利用，默许形态“display:none;”，“:hover”时则“display:block;”则能很简单完成。

而IE6下折腾就对照庞大了，经由头破血流的教导以后，总结出关头四点：
1.道理：IE6仅<a>标签撑持:hover伪类，但假如a标签内里再嵌进a标签，内里的a标签将不会失效，以是必需在之间套加一层<table>；
<!–[ifIE6]><ahref="#nogo"><table><tr><td><![endif]–>
内容部分能够含有<a>标签
<!–[ifIE6]></td></tr></table></a><![endif]–>
2.关头款式名：这个用于:hover效果的a标签的定名，假如利用与<li>分歧的款式名（在非IE6中是li:hover发生的效果），将不必再另写款式代码，不但节俭了代码开支，并且可维性更好；（这个是省时省力的关头）
<liclass="li">
<!–[ifIE6]><aclass="li"href="#nogo"><table><tr><td>
<![endif]–>
内容部分能够含有<a>标签
<!–[ifIE6]></td></tr></table></a><![endif]–>
</li>
3.visibility的利用：接纳display的话将呈现onmou搜索引擎优化ut时上一次显现的optionGroup仍旧不用掉的情形
.c_subNav.li:hoverul{visibility:visible;}
4.table的设置：[含泪ing]table必定要记得width:100%;啊，必定要记得啊，必定要记得啊，必定要记得啊。
最初完效果果：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="Chomo"/><linkrel="start"href="http://www.14px.com"title="Home"/><title>三级级联菜单</title><styletype="text/css">*{margin:0;padding:0;list-style:none;}.c_subNav{width:150px;}.c_subNavtable{width:100%;border-collapse:collapse;}.c_subNava{text-decoration:none;color:#333;}.c_subNava:hover{color:#f60;}.c_subNavulul{position:absolute;visibility:hidden;right:-150px;top:-1px;}.c_subNavli{border-bottom:1pxsolid#ccc;position:relative;_position:static;float:left;width:100%;}.c_subNava.li{position:relative;}.c_subNavli.option{display:block;line-height:15px;padding:5px5px5px25px;background:no-repeat5px4px;cursor:pointer;font:12pxVerdana;zoom:1;background:url(img/ico.gif)no-repeat;}.c_subNavli.option:hover{color:#f60;background-color:#ffa;}.c_subNavli.optionspan{display:block;padding-right:15px;background:url(img/ico.gif)no-repeatright0;}.c_subNavli.option:hoverspan{background-position:right-15px;}.c_subNav.li:hover{z-index:2;background:transparent;}.c_subNav.li:hoverul{visibility:visible;}.c_subNav.li:hoverulul{visibility:hidden;}.c_subNav.li:hoverul{border:1pxsolid#ccc;border-width:1px2px2px1px;width:150px;background:#fff;padding:1px;}.c_subNav.li:hoverli{border-bottom:none;}.c_subNav.li:hoverli.option{padding:2px5px;background:transparent;}.c_subNav.li:hoverli.option:hover{background:#0096ff;color:#fff;}.c_subNav.li:hoverli.option:hoverspan{background-position:right-30px;}.c_subNav.li:hover.li:hoverul{visibility:visible;left:145px;top:-2px;}/*---图标差别---*/.c_subNav.charges.option{background-position:4px-45px;}.c_subNav.biz.option{background-position:4px-70px;}.c_subNav.change.option{background-position:4px-95px;}.c_subNav.score.option{background-position:4px-120px;}.c_subNav.server.option{background-position:4px-145px;}.c_subNav.edit.option{background-position:4px-170px;}.c_subNav.sms.option{background-position:4px-195px;}</style></head><body><divclass="c_subNav"><ul><liclass="licharges"><ahref="#nogo"class="option"><span>话费服务</span></a><ul><liclass="li"><ahref="#nogo"class="option"><span>话费查询</span></a><ul><liclass="li"><ahref="#nogo"class="option">及时话费查询</a></li><liclass="li"><ahref="#nogo"class="option">话费余额查询</a></li><liclass="li"><ahref="#nogo"class="option">月账单查询</a></li><liclass="li"><ahref="#nogo"class="option">月详单查询</a></li><liclass="li"><ahref="#nogo"class="option">缴费汗青查询</a></li><liclass="li"><ahref="#nogo"class="option">资费优选保举</a></li></ul></li><liclass="li"><ahref="#nogo"class="option"><span>定制话费信息</span></a><ul><liclass="li"><ahref="#nogo"class="option">定制短信账单</a></li><liclass="li"><ahref="#nogo"class="option">话费余额短信提示</a></li><liclass="li"><ahref="#nogo"class="option">定制Email账单</a></li></ul></li><liclass="li"><ahref="#nogo"class="option"><span>网上交费</span></a><ul><liclass="li"><ahref="#nogo"class="option">网上缴费</a></li><liclass="li"><ahref="#nogo"class="option">充值卡缴费</a></li></ul></li></ul></li><liclass="libiz"><ahref="#nogo"class="option"><span>营业打点</span></a><ul><liclass="li"><ahref="#nogo"class="option"><span>一样平常营业打点</span></a><ul><liclass="li"><ahref="#nogo"class="option">来电显现</a></li><liclass="li"><ahref="#nogo"class="option">呼唤守候</a></li><liclass="li"><ahref="#nogo"class="option">呼唤转移</a></li><liclass="li"><ahref="#nogo"class="option">三方通话</a></li><liclass="li"><ahref="#nogo"class="option">来电提示</a></li><liclass="li"><ahref="#nogo"class="option">呼唤坚持</a></li><liclass="li"><ahref="#nogo"class="option">呼唤转移设置</a></li><liclass="li"><ahref="#nogo"class="option">主叫埋没</a></li><liclass="li"><ahref="#nogo"class="option">彩铃</a></li><liclass="li"><ahref="#nogo"class="option">国际周游</a></li><liclass="li"><ahref="#nogo"class="option">短信回执</a></li><liclass="li"><ahref="#nogo"class="option">12580综合信息</a></li><liclass="li"><ahref="#nogo"class="option">关爱一线通</a></li></ul></li><liclass="li"><ahref="#nogo"class="option"><span>数据营业</span></a><ul><liclass="li"><ahref="#nogo"class="option">手机上彀</a></li><liclass="li"><ahref="#nogo"class="option">GPRS</a></li><liclass="li"><ahref="#nogo"class="option">飞信</a></li><liclass="li"><ahref="#nogo"class="option">手机报</a></li><liclass="li"><ahref="#nogo"class="option">无线音乐俱乐部</a></li><liclass="li"><ahref="#nogo"class="option">手机邮箱</a></li><liclass="li"><ahref="#nogo"class="option">号簿管家</a></li><liclass="li"><ahref="#nogo"class="option">WLAN营业</a></li><liclass="li"><ahref="#nogo"class="option">彩乐短信</a></li></ul></li><liclass="li"><ahref="#nogo"class="option"><span>手机报停/报开</span></a><ul><liclass="li"><ahref="#nogo"class="option">手机报停</a></li><liclass="li"><ahref="#nogo"class="option">手机复机</a></li></ul></li><liclass="li"><ahref="#nogo"class="option">梦网查询与退订</a></li></ul></li><liclass="lichange"><ahref="#nogo"class="option"><span>套餐打点与变动</span></a><ul><liclass="li"><ahref="#nogo"class="option">GPRS套餐变动</a></li><liclass="li"><ahref="#nogo"class="option">产物变动</a></li></ul></li><liclass="liscore"><ahref="#nogo"class="option"><span>积分企图</span></a><ul><liclass="li"><ahref="#nogo"class="option">积分查询</a></li><liclass="li"><ahref="#nogo"class="option">积分兑换</a></li><liclass="li"><ahref="#nogo"class="option">积明白细查询</a></li><liclass="li"><ahref="#nogo"class="option">积分兑换话费</a></li><liclass="li"><ahref="#nogo"class="option">积分兑换汗青查询</a></li></ul></li><liclass="liserver"><ahref="#nogo"class="option"><span>在线客服</span></a><ul><liclass="li"><ahref="#nogo"class="option">号码回属地查询</a></li><liclass="li"><ahref="#nogo"class="option">业务厅查询</a></li><liclass="li"><ahref="#nogo"class="option">手机仿真</a></li><liclass="li"><ahref="#nogo"class="option">在线征询</a></li></ul></li><liclass="liedit"><ahref="#nogo"class="option"><span>团体信息办理</span></a><ul><liclass="li"><ahref="#nogo"class="option">团体材料修正</a></li><liclass="li"><ahref="#nogo"class="option">服务暗码变动</a></li><liclass="li"><ahref="#nogo"class="option">服务暗码重置</a></li><liclass="li"><ahref="#nogo"class="option">PUK码查询</a></li><liclass="li"><ahref="#nogo"class="option">套餐利用形态查询</a></li><liclass="li"><ahref="#nogo"class="option">营业守旧形态查询</a></li></ul></li><liclass="lisms"><ahref="#nogo"class="option">短信息服务</a></li></ul></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]

所有的设计第一步就是构思，构思好了。

只看该作者 · 发表于 2015-1-17 23:50:41

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

只看该作者 · 发表于 2015-1-24 12:16:56

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

只看该作者 · 发表于 2015-2-1 13:39:03

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

只看该作者 · 发表于 2015-2-7 07:47:24

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-2-21 08:48:24

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

只看该作者 · 发表于 2015-3-6 20:10:50

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-3-13 09:10:13

学Dreamweaver技术的过程其实是一个增加信心的过程。

只看该作者 · 发表于 2015-3-20 19:07:20

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来谈谈：纯CSS制造级联菜单

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子