减少Menu分割线的间距

之前看到社区中有介绍怎样灵活使用右键菜单的文章。现在积累下来右键菜单的方式还是比较多的，让我们来初步了解一下：

1. 使用flash自带的右键菜单，通过ContextMenu来设置，这是twaver最早右键菜单的解决方法，但这种方式有一个不太好的地方是自带上了flash的信息，而且无法删除，因此很不方便。

2. 使用Menu，通过左键的方式来触发弹出Menu项。这个方式还是比较能够接受的，对于flash也没有版本的要求。

3. 使用Flash Player 11.2的新功能实现右键菜单，这种方式虽然好，但是需要使用比较高的flash版本，而我们项目中很多用户使用的还是老的版本，领导觉得这种方法不太适合我们。上面的三种方式，我们最终选择了第二种。在实际使用过程中总是有这样那样的问题。我今天就碰到了一个这样的问题。我使用的是第二种方法：通过menu来实现右键菜单。由于菜单项比较多，而且实际应用中也还需要对菜单项进行分类、分层。

这种效果一般来说已经够用了，但是领导觉得分割线和上下文字之间的间距太大了，需要改小一点，于是上网查了资料，发现确实有一个参数能控制：variableRowHeight。这里有详细的使用例子：Reducing the vertical space around a separator in a Flex PopUpButton control’s pop up menu by enabling variable row heights

赶紧试试我的菜单效果，于是给menu设置了variableRowHeight=true，但效果却不是那么尽如人意：

一级菜单还行，二级菜单上的分割线样式还是原来那样，没变，这会是什么原因呢？继续Google发现基本都是说设置了这个属性值就可以了。难道还是Adobe的bug？算了，还是自己看源码吧：

</p><p style="text-align:left"> 终于达到了我们预期效果了，最后给大家分享一下源码：见原文下方</p> </p></div><div style="margin:0 auto;width:300px;height:250px;position:relative;"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 移动端全站正文 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6147101717324856" data-ad-slot="1958144088" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <div class="subn-nav"><a href="//m.reader8.net">读书人网</a> ><a href="//m.reader8.net/jiaocheng/webqd/">Web前端</a></div><div class="sp-jctu"><h3><span> 热点推荐 </span></h3><ul><li><p><a href="//m.reader8.net/jiaocheng/20170204/2771721.html">当前web前端流行的图片压缩实用工具</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140427/2315850.html">惯用小技巧</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140427/2315849.html">bower相干</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140426/2314940.html">三列百分之比格局</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140426/2314939.html">给weblogic指定大小的内存储器</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140426/2314945.html">jQuery 垂直滑动快讯展示</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140426/2314938.html">jquery 有关特效demo</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140426/2314937.html">备忘简略的发布WebService 可能会</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140425/2313961.html">IE6 lt;Option/gt; selected属性设置有关问</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140425/2313960.html">浏览器兼容细节拾掇</a></p></li> </ul></div><div style="display:none;"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?d6151f323a57d16696165e47eee86d53"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script></div> <div class="footer"><p>触屏版 | <a href="//www.reader8.net/jiaocheng/20120621/1289873.html#fromapp">电脑版</a></p><p>读书人网 m.reader8.net</p></div> <script language="javascript"> function clickme(sad){ var divobjdiv = document.getElementById("divobjdiv" + sad); if(divobjdiv.style.display =="none"){ divobjdiv.style.display ="block"; }else{ divobjdiv.style.display ="none"; } var wenzi = document.getElementById('divobjimg' + sad); if(wenzi.innerText == "收起"){ wenzi.innerText = "查看更多"; }else{ wenzi.innerText = "收起"; } } </script> <div id="back-top"><a href="#top"><span></span></a></div> </body> </html>