There is a multi-level list.

Those. if the list is not opened, empty space remains under the footer. If you add styles to the popup <ul> lists:

  max-height: 500px; overflow-x: hidden; overflow-y: auto;

then an anomaly appears in the form of empty space below the list. Under the footer, respectively, disappears.

Help me to understand.

  • Without html / css we will not guess. - Jean-Claude
  • Here is a link to the site . Just can not imagine how you show this kilometer list :) - Alex_LEON
  • The third level ul has a great height; accordingly, it stretches the dark background ul of the second level. Recycle logic of backgrounds. - Jean-Claude
  • What do you mean by the logic of backgrounds? Can you explain in a nutshell? Or stick a nose where to dig? - Alex_LEON
  • easier to make a list of the third level (the one that is long in height) in 2-3 columns as on rozetka.com.ua - Jean-Claude

2 answers 2

You just need to do it through CSS so that when you click on an object, the style changes to block, but for now and then back to none. You can implement this in Jquery: $('click').click(function(){ $('.tab').toggle(); }); Well, of course, insert your values. I hope I understood the question correctly. PS CSS should have display:none;

  • You probably did not understand the question correctly. Menu pops up when you hover the mouse. The problem is different: the third level has a very long list and it goes down for the footer, i.e. when the list is hidden, there is empty space under the footer. - Alex_LEON

In general, I solved this issue using jquery. Namely: displayed the first 20 elements, and added <li class="btn-show-more"> and hid all subsequent elements. When you click on the created item, I show the hidden items. Maybe someone will need:

 $(document).ready(function() { $('ul.first li ul.second li ul.third li').eq(20).after('<li class="btn-show-more">Показать больше...</li>'); $('ul.first li ul.second li ul.third li:nth-child(n+23)').hide(); $('.btn-show-more').click(function(){ $('ul.first li ul.second li ul.third li:nth-child(n+23)').show(); $('.btn-show-more').hide(); }); });