CODE EXAMPLE FOR JAVASCRIPT

set css var with javascript

// this is for site-navigation with more sub ul-blocks.
// in css root{--ul-hover-height:100px} //fallbackvalue 
// in css: nav ul ul:hover{height:--ul-hover-height;}

// to make it dynamic using JS: 
// set variable ul ul height depending on nr. of li's:
function setUlHeight(elem){        
    parentHeight=window.getComputedStyle(elem.parentNode).height
    parentHeight=parseInt(parentHeight)*1.2 //to cover li padding/margin..
    elemHeight=parentHeight * elem.childElementCount
  
    let root = document.documentElement;           
    root.style.setProperty('--ul-hover-height', elemHeight); }