Question

I have a dropdown in HTML. When I hover on it, it expands. I added a new entry in the dropdown, and when I hover on it, I want my new entry visible completely (I added Comp3 in dropdown. I can see the upper part of it, but not completely Comp3). I tried various things like giving height to divs, increasing the height of the component in css, but nothing helped. Viewing the source code of that in the browser, this is the small code snippet of that particular dropdown:

<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>

Below is the javascript function that expands the dropdown:

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

And here is the dropdown class:

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;
}

Please let me know if somehow height can be increased. Thanks in advance.

Answer 1

I believe your <div> and <ul> heights needs to be set to auto and the heights of each <li> needs to be adjusted.

Often times CSS becomes the practice of hit or miss when dealing with issues like these. First set everything to auto then systematically experiment with every permutation.

Good luck!