纯CSS 级联菜单实现代码

2024-07-11 08:38:37

字体：大中小

来源：转载

供稿：网友

参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
操作系统：Windows
这次给项目做的级联菜单使用了纯CSS的方式，霍霍，能用CSS做的，就用CSS完成吧。
早已有前辈完成过这样的实例了，我以为我能顺利完成，但没想到处处碰壁，故记录一点心得如下，供大家参阅。
废话不多说，咚咚咚，开始制作啦！
除了IE6这个坚强的孩子，其他浏览器攻克还是比较容易的。
运行代码框

<br /><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br /><html xmlns=”http://www.w3.org/1999/xhtml”><br /><head><br /><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /><br /><meta name=”author” content=”Chomo” /><br /><link rel=”start” href=”http://www.14px.com” title=”Home” /><br /><title>三级级联菜单</title><br /><style type=”text/css”><br />* { margin:0; padding:0; list-style:none;}<br />.c_subNav { width:150px; }<br />.c_subNav a { text-decoration:none; color:#333;}<br />.c_subNav a:hover { color:#f60;}<br />.c_subNav ul ul { position:absolute; display:none; right:-150px; top:-1px;}<br />.c_subNav li { border-bottom:1px solid #ccc; position:relative; _position:static; float:left; width:100%;}<br />.c_subNav a.li { position:relative;}<br />.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://huoche.7234.cn/images/jb51/obldzyqjajr.gif) no-repeat;}<br />.c_subNav li .option:hover { color:#f60; background-color:#ffa;}<br />.c_subNav li .option span { display:block; padding-right:15px; background:url(http://huoche.7234.cn/images/jb51/obldzyqjajr.gif) no-repeat right 0;}<br />.c_subNav li .option:hover span { background-position:right -15px;}<br />.c_subNav .li:hover { z-index:2; background:transparent;}<br />.c_subNav .li:hover ul { display:block;}<br />.c_subNav .li:hover ul ul { display:none;}<br />.c_subNav .li:hover ul { border:1px solid #ccc; border-width:1px 2px 2px 1px; width:150px; background:#fff; padding:1px;}<br />.c_subNav .li:hover li { border-bottom:none;}<br />.c_subNav .li:hover li .option { padding:2px 5px; background:transparent;}<br />.c_subNav .li:hover li .option:hover { background:#0096ff; color:#fff;}<br />.c_subNav .li:hover li .option:hover span { background-position:right -30px;}<br />.c_subNav .li:hover .li:hover ul { display:block; left:145px; top:-2px;}<br />.c_subNav .charges .option { background-position:4px -45px;}<br />.c_subNav .biz .option { background-position:4px -70px;}<br />.c_subNav .change .option { background-position:4px -95px;}<br />.c_subNav .score .option { background-position:4px -120px;}<br />.c_subNav .server .option { background-position:4px -145px;} </SPAN> </div> </div> <div class=page1> <p align="center" class="pageLink"></p> </div> <div class="fenxiang">  <div style="text-align:left">上一篇：<a href='/wen/2024/07-11/1342927.html'>CSS样式设计网页字体与用户体验</a></div> <br> <div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1342929.html'>CSS制作网页的类以及ids的命名</a></div> <br> <script src=/d/js/acmsd/gao21.js></script>  </div> <div class="pinglun">  <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您没什么话要说吗？"); obj.saytext.focus(); return false; } return true; } </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title"> <tr> <td><strong>发表评论</strong></td> <td align="right"><a href="/e/pl/?classid=215&id=1342928">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1342928&down=2"></script></span>条评论</a></td> </tr> </table> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="2"> <tr> <td width="56%" align="left">用户名: <input name="username" type="text" class="inputText" id="username" value="" size="16" /></td> <td width="44%" align="left">密码: <input name="password" type="password" class="inputText" id="password" value="" size="16" /></td> </tr> <tr> <td align="left">验证码: <input name="key" type="text" class="inputText" size="10" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td> <td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" /> 匿名发表</td> </tr> </table> <textarea name="saytext" cols="70" rows="6" id="saytext">

学习交流