位置：GZ医疗队 > 公益纪实 > 公益站长 > 网络技术 >
全兼容的纯CSS级联菜单要点浅析
来源：14px 作者：蓝色理想 点击:次 时间：2009-06-13
参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
操作系统：Windows
蓝色理想经典论坛首发，转载请注明出处
这次给项目做的级联菜单使用了纯CSS的方式，霍霍，能用CSS做的，就用CSS完成吧。
早已有前辈完成过这样的实例了，我以为我能顺利完成，但没想到处处碰壁，故记录一点心得如下，供大家参阅。
废话不多说，咚咚咚，开始制作啦！
除了IE6这个坚强的孩子，其他浏览器攻克还是比较容易的。
cope:
<!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=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href="http://www.14px.com" title="Home" />
<title>三级级联菜单</title>
<style type="text/css">
* { margin:0; padding:0; list-style:none;}
.c_subNav { width:150px; }
.c_subNav a { text-decoration:none; color:#333;}
.c_subNav a:hover { color:#f60;}
.c_subNav ul ul { position:absolute; display:none; right:-150px; top:-1px;}
.c_subNav li { border-bottom:1px solid #ccc; position:relative; _position:static; float:left; width:100%;}
.c_subNav a.li { position:relative;}
.c_subNav li .option { display:block; line-height:15px; padding:5px 5px 5px 25px; background:no-repeat 5px 4px; cursor:pointer; font:12px Verdana; zoom:1; background:url(http://www.14px.com/wp-content/uploads/2009/05/ico.gif) no-repeat;}
.c_subNav li .option:hover { color:#f60; background-color:#ffa;}
.c_subNav li .option span { display:block; padding-right:15px; background:url(http://www.14px.com/wp-content/uploads/2009/05/ico.gif) no-repeat right 0;}
.c_subNav li .option:hover span { background-position:right -15px;}
.c_subNav .li:hover { z-index:2; background:transparent;}
.c_subNav .li:hover ul { display:block;}
.c_subNav .li:hover ul ul { display:none;}
.c_subNav .li:hover ul { border:1px solid #ccc; border-width:1px 2px 2px 1px; width:150px; background:#fff; padding:1px;}
.c_subNav .li:hover li { border-bottom:none;}
.c_subNav .li:hover li .option { padding:2px 5px; background:transparent;}
.c_subNav .li:hover li .option:hover { background:#0096ff; color:#fff;}
.c_subNav .li:hover li .option:hover span { background-position:right -30px;}
.c_subNav .li:hover .li:hover ul { 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>
<div class="c_subNav">
<ul>
<li class="li charges">
<a href="#nogo" class="option"><span>话费服务</span></a>
<ul>
<li class="li">
<a href="#nogo" class="option"><span>话费查询</span></a>
<ul>
<li class="li"><a href="#nogo" class="option">实时话费查询</a></li>
<li class="li"><a href="#nogo" class="option">话费余额查询</a></li>
<li class="li"><a href="#nogo" class="option">月账单查询</a></li>
<li class="li"><a href="#nogo" class="option">月详单查询</a></li>
<li class="li"><a href="#nogo" class="option">缴费历史查询</a></li>
<li class="li"><a href="#nogo" class="option">资费优选推荐</a></li>
</ul>
</li>
<li class="li">
<a href="#nogo" class="option"><span>定制话费信息</span></a>
<ul>
<li class="li"><a href="#nogo" class="option">定制短信账单</a></li>
<li class="li"><a href="#nogo" class="option">话费余额短信提醒</a></li>
<li class="li"><a href="#nogo" class="option">定制Email账单</a></li>
</ul>
</li>
<li class="li">
<a href="#nogo" class="option"><span>网上交费</span></a>