javascript - 如何增加下拉菜单的高度？

Question

我有一个 HTML 下拉菜单。当我将鼠标悬停在它上面时，它会展开。我在下拉列表中添加了一个新条目，当我将鼠标悬停在它上面时，我希望我的新条目完全可见(我在下拉列表中添加了 Comp3。我可以看到它的上半部分，但不完全 < em>Comp3)。我尝试了各种方法，比如给 div 赋予高度，增加 css 中组件的高度，但没有任何帮助。在浏览器中查看其源代码，这是该特定下拉菜单的一小段代码:

<div class="optionsDropDown">
  <p class="optionsDropDown collapseTrigger" id="userMenu">
    Hello<em>&nbsp;User </em><span class="closed"></span>
  </p>
  <ul class="optionsDropDown collapseContent closed" name="userMenu">
    <li>
      <a class="optionsDropDown" href="javascript:showHelp();">
        <span id="0">Comp1</span>
      </a>
    </li>
    <li>
      <a class="optionsDropDown" href="myAction.do?actionCode=3&page=controlPanel" target="view">
        <span id="1">Comp3</span>
      </a>
    </li>    
  </ul>
</div>

下面是扩展下拉列表的javascript函数:

$.fn.openMenu = function(menuContent){ 
  $(menuContent).slideDown(200,function() { 
    $(menuContent).children().fadeTo('fast',1); 
  }); 
  $('span', this).removeClass('closed');
};

这是下拉类:

div.optionsDropDown {
    float: right;  
    font-size: 11px;
    height: 25px;
    margin: 12px 32px 0 0;
    position: absolute;
    top: 0px;
    right: 10px;
    width: 120px;
    z-index: 10000;
}

如果可以增加高度，请告诉我。提前致谢。

Answer 1

我相信你的<div>和 <ul> heights 需要设置为 auto 并且每个 <li> 的高度需要调整。

在处理此类问题时，CSS 常常成为碰碰运气的做法。首先将所有内容设置为自动，然后系统地试验每个排列。

祝你好运!