I am working on creating custom dropdown lists that are activated by hovering over them using CSS.
<div class="CusSelect">
<p>Select from List</p>
<ul>
<li>Football</li>
<li>Cricket</li>
<li>Hockey</li>
</ul>
</div>
You can view the full code and demonstration on JSFiddle http://jsfiddle.net/ZX8AK/ with the included CSS rules.
The issue I'm facing is that when hovering over the list, it immediately sets the height to auto instead of transitioning smoothly. I would like the height change to be animated.
Since the height will vary depending on dynamically added items, I need a solution that allows for smooth height adjustment without knowing the final value in advance, whether through JQuery or CSS.
To achieve an animated height effect, you can use the following CSS:
.CusSelect:hover > ul
{
height:100px;
}
However, the challenge lies in not knowing the exact height beforehand, necessitating the use of auto for flexibility.