I have recently made some updates to our website's dropdown menu, expanding the results displayed. However, I would like the dropdown contents to fit within the width of our page.
https://i.sstatic.net/aR0Qm.jpg
https://i.sstatic.net/e61Ig.jpg
I have tried adjusting the CSS with limited success:
.menu > ul > li > ul {
Whenever I make changes, the entire dropdown shrinks instead of just the content. My coding skills are basic and I usually work with divs nested inside one another to center them, but that approach seems to mess everything up. It seems like I need to somehow wrap the <li></li> in another container to control the inner content width?
If anyone can assist me, below is the code snippet showing how the dropdown is structured.
$('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');
$('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
$(".menu > ul > li").hover(function(e) {
if ($(window).width() > 943) {
$(this).children("ul").stop(true, false).fadeToggle(150);
e.preventDefault();
}
});
$(".menu > ul > li").click(function() {
if ($(window).width() <= 943) {
$(this).children("ul").fadeToggle(150);
}
});[CSS styles here]<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="headerNavigation" class="hide" style="min-width: 680px;">
<div class="menu-container">
[Menu items structure here]
0.png" alt="Occasional" width="300"></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div></div>