纯CSS实现的滑动的可折叠菜单

2024-07-11 08:38:27

字体：大中小

来源：转载

供稿：网友

<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=gb2312″ /><br /><title>纯CSS实现的滑动的可折叠菜单</title><br /><style type=”text/css”><br />/* ================================================================<br />This copyright notice must be untouched at all times.<br />The original version of this stylesheet and the associated (x)html<br />is available at http://www.cssplay.co.uk/menus/drop_definition.html<br />Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.<br />This stylesheet and the assocaited (x)html may be modified in any<br />way to fit your requirements.<br />=================================================================== */<br />#dlmenu {height:10em;}<br />#menu {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:15em; background:#fff; z-index:100;}<br />#menu li {display:block; padding:0; margin:0; position:relative; z-index:100;}<br />#menu li a, #menu li a:visited {display:block; text-decoration:none;}<br />#menu li dd {display:none;}<br />#menu li:hover, #menu li a:hover {border:0;}<br />#menu li:hover dt a , #menu li a:hover dt a {background:#d4d8bd url(top_grad_2.gif) center center; color:#ff0; }<br />#menu li:hover dd, #menu li a:hover dd {display:block;}<br />#menu li:hover dl, #menu li a:hover dl {height:20em; background:#b4be9c url(sub_grad.gif);}<br />#menu table {border-collapse:collapse; padding:0; margin:-4px; font-size:1em;}<br />#menu dl {width: 15em; margin: 0; background: #6f9c6f; cursor:pointer;}<br />#menu dt {margin:0; padding: 0; font-size: 1.1em; border-top:1px solid #cce;}<br />#menu dd {margin:0; padding:0; font-size: 1em; text-align:left; }<br />.gallery dt a, .gallery dt a:visited {display:block; color:#fff; padding:5px 5px 5px 10px; background:#949e7c url(top_grad.gif) center center;}<br />.gallery dd a, .gallery dd a:visited {color:#000; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 20px; background:#b4be9c url(sub_grad.gif);}<br />* html .gallery dd a, * html .gallery dd a:visited {height:1em;}<br />.gallery dd a:hover {background:#7aa; color:#ff0;}<br /></style><br /></head><br /><body><br /><div id=”dlmenu”><br /><ul id=”menu”><br /><li><br /><!–[if lte IE 6]><a href=”#nogo”><table><tr><td><![endif]–><br /><dl class=”gallery”><br /> <dt><a href=”../menu/index.html”>DEMOS</a></dt><br /> <dd><a href=”../menu/zero_dollars.html” title=”The zero dollar ads page”>zero dollars</a></dd><br /> <dd><a href=”../menu/embed.html” title=”Wrapping text around images”>wrapping text</a></dd> </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/1342880.html'>目前比较全面的浏览器CSS BUG兼容汇总</a></div> <br> <div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1342882.html'>请保留超链接的outline属性</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=1342881">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1342881&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">

学习交流