友情链接太多了，是不是对侧边栏上长长的菜单感到不爽啊？尤其是单篇文章的时候，侧边栏使劲往下跑，让我们猛拉滚动条…不爽啊。
对于这个，看到一个朋友用侧边栏内嵌滚动条来解决，也很是不错。其实，对于yo2这样可以自由编辑侧边栏css代码的博客来说，我们可以做得更漂亮：竖型鼠标触发伸缩菜单。效果如本站侧边栏links区所示
为配合模板，在原代码的基础上，我作了一些调整，比如去掉背景图片，改变背景颜色以及菜单尺寸等参数。
尤其是源代码依背景图片而定义了菜单显示高度，对于超出部分的链接便不能显示，而对于只有一两个菜单项的却要显示一大部分空白区域–这个问题在去除了背景图片之后，我惊喜的发现菜单高度对于超出部分自动的适应了显示完全。然而当我用orca，firefox浏览器一看时，就不是那么回事了，他们忠实的显示我的指定高度：10em，一个菜单里只能显示三个不到的链接项。
下面说的就是如你看到，本站侧边栏links区的显示方法，当然你可以自己定义各个颜色值，并参考站酷原文，自己定义背景图片（我个人不建议）。
以yo2用户为例：
在侧边栏区块添加一个文本，输入代码：
[code:english]
[/code]
把以上代码对照本站侧边栏，修改《dt》…《/dt》以及《dd》…《dd》（这里的《》是指相应的英文符号<>）里边的链接信息即可，当然你也可以按实际需要随意的增减其项数。
注：源代码来源：站酷（zcool），原文：cssplay实用css代码精选-竖型鼠标触发伸缩菜单
效果不错，有空我把它改进一下。
呵，再研究一下那代码，做得更漂亮点。
效果不错，但感觉配色不太好。
Reply elion: 你可以根据自己的喜好和模板，修改background:#…以及color:#…后面的颜色值来配色的。
8)我很喜欢这种风格
请问你现在的”llinks”的代码是多少啊？
[Comment ID #198215 Will Be Quoted Here]
——嗯，把下面的代码粘贴到记事本里，分别替换《》为就是我现在用的代码了，当然，一些链接我给省去了。
《style type=”text/css”》
#dlmenu {height:170px;}
#menu {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:310px; 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:#00ccff center center; color:#fff; }
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {height:auto; background:#ffffff;}
#menu table {border-collapse:collapse; padding:0; margin:-4px; font-size:1em;}
#menu dl {width: 25em; margin: 0; background: #6f9c6f; cursor:pointer;}
#menu dt {margin:0; padding: 0; font-size: 1.1em; border-top:0px solid #cce;}
#menu dd {margin:0; padding:0; font-size: 1em; text-align:left; }
.gallery dt a, .gallery dt a:visited {display:block; color:#333333; padding:5px 5px 5px 10px; background:#ffffff center center;}
.gallery dd a, .gallery dd a:visited {color:#0099FF; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 10px; background:#ffffff;}
* html .gallery dd a, * html .gallery dd a:visited {height:1em;}
.gallery dd a:hover {background:#99cc00; color:#fff; }
《/style》
《div id=”dlmenu”》
《ul id=”menu”》
《li》
《!–[if lte IE 6]》《a href=”#nogo”》《table》《tr》《td》《![endif]–》
《dl class=”gallery”》
《dt》《a href=”http://me.yo2.cn/nexus/4935/”》Friends’ Blog《/a》《/dt》
《dd》《a href=”/links/”》互助友情链接请点击留言《/a》《/dd》
《dd》《a href=”http://www.sheyu.net/” target=_blank》舍予之间（SHEYU’s bog）-写挨踢，看社会《/a》《/dd》
《dd》《a href=”http://ying.yo2.cn” target=”_blank”》 ying’s not here — ying’s Blog 最纯粹心情日志《/a》《/dd》
《dd》《a href=”http://blog.5d.cn/user36/cat8250/” target=”_blank”》蝙蝠猫的记事本《/a》《/dd》
《dd》《a href=”http://aobai0514.blog.tom.com” target=”_blank”》半醉人间·等闲人：敖败’s Blog《/a》《/dd》
《dd》《a href=”/links/”》…期待你的加入，单击此处留下你的链接《/a》《/dd》
《/dl》
《!–[if lte IE 6]》《/td》《/tr》《/table》《/a》《![endif]–》
《/li》
《li》
《!–[if lte IE 6]》《a href=”#nogo”》《table》《tr》《td》《![endif]–》
《dl class=”gallery”》
《dt》《a href=”/sitemap/”》本站索引《/a》《/dt》
《dd》《a href=”http://chriant.cn/”》BLOG - 日志 《/a》《/dd》
《/dl》
《!–[if lte IE 6]》《/td》《/tr》《/table》《/a》《![endif]–》
《/li》
《li》
《!–[if lte IE 6]》《a href=”#nogo”》《table》《tr》《td》《![endif]–》
《dl class=”gallery”》
《dt》《a href=”/blog/category/web/”》Network《/a》《/dt》
《dd》《a href=”http://fairyfish.net” target=_blank》我爱水煮鱼《/a》《/dd》
《dd》《a href=”http://writetomyblog.com/” target=_blank》多媒体日志在线编辑《/a》《/dd》
《/dl》
《!–[if lte IE 6]》《/td》《/tr》《/table》《/a》《![endif]–》
《/li》
《li》
《!–[if lte IE 6]》《a href=”#nogo”》《table》《tr》《td》《![endif]–》
《dl class=”gallery”》
《dt》《a href=”riant@chriant.cn”》Contact《/a》《/dt》
《dd》《a href=”mailto:riant@chriant.cn” target=_blank》Email:riant@chriant.cn《/a》《/dd》
《dd》《a href=”http://wpa.qq.com/msgrd?v=1&uin=280516298&site=walmart&menu=yes” title=”如果你的QQ在线请单击给我留言” target=_blank》QQ：280516298《/a》《/dd》
《/dl》
《!–[if lte IE 6]》《/td》《/tr》《/table》《/a》《![endif]–》
《/li》
《li》
《!–[if lte IE 6]》《a href=”#nogo”》《table》《tr》《td》《![endif]–》
《dl class=”gallery”》
《dt》《a href=”/links/”》鸣谢《/a》《/dt》
《dd》《a href=”http://yo2.cn” target=_blank》yo2.cn优博网–提供博客及空间服务《/a》《/dd》
《dd》《a href=”http://oneoo.com/” target=_blank》Oneoo–yo2.cn管理员《/a》《/dd》
《dd》《a href=”http://charles.yo2.cn/” target=_blank》Charles–yo2.cn管理员《/a》《/dd》
《dd》《a href=”http://jsbox.net/” target=_blank》Jay Kwong–免费提供模板《/a》《/dd》
《dd》《a href=”http://clicki.cn/” target=_blank》Clicki.cn–提供免费访客及点击统计《/a》《/dd》
《dd》《a href=”http://www.yikay.com/” target=_blank》亿开–专业域名主机服务提供域名《/a》《/dd》
《/dl》
《!–[if lte IE 6]》《/td》《/tr》《/table》《/a》《![endif]–》
《/li》
《/ul》
《/div 》
谢谢了！
非常感谢！
谢谢！
我试过了，可惜怎么没有触发伸缩的效果啊？
我是个新手，如果方便的话，可否把你的“LINKS”中最简单的代码（每部分只保持一条链接就好了）发布一下啊。感谢！！！
RE —— [Comment ID #198967 Will Be Quoted Here] ——
对于《style type=”text/css”》….《/style》部分，你可以根据自己模板风格修改“background”（背景）以及“color”（颜色）后的颜色代码，根据你侧边栏宽度修改“width”（宽度）后的值，我本来想改作100%,但好象（至少在IE6下）不能正常显示。其他的参数最好就不要改了。
而《div id=”dlmenu”》….《/div》是HTML部分，《dt》和《/dt》之间是鼠标闲置时的可见内容（当然，在这个例子里是一个…链接语句），在其下面的〈dd〉和〈/dd〉之间是鼠标出发之后所显示的内容/链接，多组〈dd〉〈/dd〉就分行显示。
下面是按照你的要求删减之后，html部分的代码，根据空行，你可以知道，html代码的成对关系，即《…》《/…》是一对，如〈li〉…〈/li〉是一对，若是要增加或者是减少链接组或者个数，要注意成组，成队的删增代码：
《div id=”dlmenu”》
《ul id=”menu”》
《li》
《!–[if lte IE 6]》《a href=”#nogo”》《table》《tr》《td》《![endif]–》
《dl class=”gallery”》
《dt》《a href=”http://me.yo2.cn/nexus/4935/”》Friends’ Blog《/a》《/dt》
《dd》《a href=”/links/”》互助友情链接请点击留言《/a》《/dd》
《/dl》
《!–[if lte IE 6]》《/td》《/tr》《/table》《/a》《![endif]–》
《/li》
《li》
《!–[if lte IE 6]》《a href=”#nogo”》《table》《tr》《td》《![endif]–》
《dl class=”gallery”》
《dt》《a href=”/sitemap/”》本站索引《/a》《/dt》
《dd》《a href=”http://chriant.cn/”》BLOG - 日志 《/a》《/dd》
《/dl》
《!–[if lte IE 6]》《/td》《/tr》《/table》《/a》《![endif]–》
《/li》
《li》
《!–[if lte IE 6]》《a href=”#nogo”》《table》《tr》《td》《![endif]–》
《dl class=”gallery”》
《dt》《a href=”/blog/category/web/”》Network《/a》《/dt》
《dd》《a href=”http://fairyfish.net” target=_blank》我爱水煮鱼《/a》《/dd》
《/dl》
《!–[if lte IE 6]》《/td》《/tr》《/table》《/a》《![endif]–》
《/li》
《li》
《!–[if lte IE 6]》《a href=”#nogo”》《table》《tr》《td》《![endif]–》
《dl class=”gallery”》
《dt》《a href=”riant@chriant.cn”》Contact《/a》《/dt》
《dd》《a href=”mailto:riant@chriant.cn” target=_blank》Email:riant@chriant.cn《/a》《/dd》
《/dl》
《!–[if lte IE 6]》《/td》《/tr》《/table》《/a》《![endif]–》
《/li》
《li》
《!–[if lte IE 6]》《a href=”#nogo”》《table》《tr》《td》《![endif]–》
《dl class=”gallery”》
《dt》《a href=”/links/”》鸣谢《/a》《/dt》
《dd》《a href=”http://yo2.cn” target=_blank》yo2.cn优博网–提供博客及空间服务《/a》《/dd》
《/dl》
《!–[if lte IE 6]》《/td》《/tr》《/table》《/a》《![endif]–》
《/li》
《/ul》
《/div 》
你可以边改边看效果。有什么不对的，把你的代码给我发一下，我看看。