Not rendering menu if no menu items to show

The other day we were running into this issue. We wanted to find a Typoscript solution (not Javascript) because we didn't want the menu to be rendered at all.
The "ul" tag for the menu (which had a background, height, padding etc) was being rendered with no "li" tags inside. So we were getting an empty colored bar displayed in the front end (when no menu items to show) 

This was the TS code we had at the beginning:
lib.submenu = HMENU
lib.submenu.entryLevel = 2
lib.submenu  {
  expAll = 0
  wrap = <ul id="submenu">|</ul>
  1 = TMENU
  1 {     
      noBlur = 1
      expAll = 1
      NO = 1
      NO {
        wrapItemAndSub = |*|<li>|</li>|*|<li class="last">|</li>
      }
      ACT = 1
      ACT {
          wrapItemAndSub = <li class="on">|</li>
      }
  }
}

Everything was solved changing one line, see the result below:
lib.submenu = HMENU
lib.submenu.entryLevel = 2
lib.submenu  {
  expAll = 0
  1 = TMENU
  1 {
      wrap = <ul id="submenu">|</ul>  
      noBlur = 1
      expAll = 1
      NO = 1
      NO {
        wrapItemAndSub = |*|<li>|</li>|*|<li class="last">|</li>
      }
      ACT = 1
      ACT {
          wrapItemAndSub = <li class="on">|</li>
      }
  }
}

Another solution could be to adjust maybe the styles, and apply height, padding and background properties to "li" tags instead, but this worked for us too. If you have any other scenario were this was also useful, please add your comments.
Thank you....