怎么用js和css做一个滑动折叠的菜单？

来源：百度知道 编辑：UC知道 时间：2024/05/29 19:30:16
像苹果网站mac栏目右边那样的
http://www.apple.com.cn/mac/
请给出源码，谢谢
是右边，何处购买、热门下载、热点新闻这三个菜单的效果, 321bj你的代码还是不行啊，菜单滑动得太突然了，没有过度效果，而且我要的是开始的时候有一个菜单是展开的，不管在什么情况下，那三个菜单的总长度是不变的

1、在网页<head>区添加以下样式定义 ：
<style type="text/css">
#dlmenu {height:10em;}
#menu {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:15em; background:#fff; z-index:100;}
#menu li {display:block; padding:0; margin:0; position:relative; z-index:100;}
#menu li a, #menu li a:visited {display:block; text-decoration:none;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dt a , #menu li a:hover dt a {background:#d4d8bd url(top_grad_2.gif) center center; color:#ff0; }
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {height:20em; background:#b4be9c url(sub_grad.gif);}
#menu table {border-collapse:collapse; padding:0; margin:-4px; font-size:1em;}
#menu dl {width: 15em; margin: 0; background: #6f9c6f; cursor:pointer;}
#menu dt {margin:0; padding: 0; font-size: 1.1em; border-top:1px solid #cce;}
#men