Could you possibly assist me with creating a unique navigation effect for my new website? I am aiming to achieve an expandable two-column menu on hover of a parent list item that contains a sub-list.
So far, I have made some progress in implementing this feature. Here is the HTML code:
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Sub Link 1</a></li>
<li><a href="#">Sub Link 2</a></li>
<li><a href="#">Sub Link 3</a></li>
<li><a href="#">Sub Link 4</a></li>
<li><a href="#">Sub Link 5</a></li>
<li><a href="#">Sub Link 6</a></li>
<li><a href="#">Sub Link 7</a></li>
</ul>
</li>
<li><a href="#">Top Link</a>
<ul>
<li><a href="#">Sub Link 1</a></li>
<li><a href="#">Sub Link 2</a></li>
<li><a href="#">Sub Link 3</a></li>
<li><a href="#">Sub Link 4</a></li>
<li><a href="#">Sub Link 5</a></li>
<li><a href="#">Sub Link 6</a></li>
<li><a href="#">Sub Link 7</a></li>
</ul>
</li>
<li><a href="#">News</a>
<ul>
<li><a href="#">News Item 1</a></li>
<li><a href="#">News Item 2</a></li>
<li><a href="#">News Item 3</a></li>
<li><a href="#">News Item 4</a></li>
<li><a href="#">News Item 5</a></li>
<li><a href="#">News Item 6</a></li>
<li><a href="#">News Item 7</a></li>
<li><a href="#">News Item 8</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
Here is the CSS code:
...If you would like to see a demo, click here. However, I am facing an issue where the list items appear to load one by one as the ul grows in size. I would prefer them to be fixed height and fully formed when the ul finishes expanding
To address this, it may require some JavaScript or jQuery, as I aim to avoid making changes to the HTML due to the dynamic nature of the menu on a CMS site. Feel free to ask if clarification is needed.