MENU - poważny problem wysokości! Opcje

[asus2014]

Witam,
Zastanawiam się nad odpowiednim rozwiązaniem dotyczącym prezentowanego menu.

LINK do podglądu na żywo > http://plikmarket.pl

Mój problem polega na tym, by po najechaniu odpowiedniej podkategorii (np. w audio > efekty) wysokość okna była zależna od ilości linii kolejnych podkategorii czyli zawartości okna. Proszę o pomoc jak to rozwiązać by wysokość okna była zmienna i dostosowana do wyświetlanej zawartości w zależności od rozdziału.

WAŻNE by zachować dotychczasową strukturę kodu html + css (nazwy div-ów, class itp.)
Wysokości <ul> w prezentowanym kodzie przypisywane są automatycznie.
Podkategorie zostały zmniejszone w kodzie ze względu na ograniczenia forum.

KOD HTML

Kod

<nav id="menu">
            
            <ul>
            <li class="main active"><a href="/files/audio">AUDIO</a><div class="background" style="position: absolute; width: 70px; left: 403px; height: 10px; z-index: 9999; background: white;"></div>
                      <ul class="submenu" style="height: 241px;">
         <div class="submenu-ov">
                                    <li style="width: 196.4px;"><div class="m-head-ov"><span class="m-head"><a href="#" style="color: rgb(33, 33, 33);">MUZYKA</a></span><div class="bg" style="width: 0px; visibility: visible;"></div></div>
                                        <ul class="submenu-absolute" style="display: block;">
                                                  <li style="display: block;"><a href="/files/audio/muzyka/abstrakcja" style="color: rgb(33, 33, 33);">Abstrakcja</a><span class="cnt">[0]</span></li>
                                                  <li style="display: block;"><a href="/files/audio/muzyka/ambient" style="color: rgb(33, 33, 33);">Ambient</a><span class="cnt">[0]</span></li>
                                                  <li style="margin-right: 0px; display: block;"><a href="/files/audio/muzyka/soul-r-b" style="color: rgb(33, 33, 33);">Soul, R&amp;B</a><span class="cnt">[0]</span></li>
                                                  <li style="border: none; display: block;"><a href="/files/audio/muzyka/wokal" style="color: rgb(33, 33, 33);">Wokal</a><span class="cnt">[0]</span></li>
                                                  <li style="border: none; display: block;"><a href="/files/audio/muzyka/inne" style="color: rgb(33, 33, 33);">Inne</a><span class="cnt">[0]</span></li>
                                           </ul>
                <div style="clear:both"></div>
                                    </li>              
                                    <li style="width: 196.4px;"><div class="m-head-ov"><span class="m-head"><a href="#" style="color: rgb(33, 33, 33);">EFEKTY</a></span><div class="bg" style="width: 0px; visibility: hidden;"></div></div>
                                        <ul class="submenu-absolute" style="display: none;">
                                                  <li style="display: block;"><a href="/files/audio/efekty/bajka">Bajka</a><span class="cnt">[0]</span></li>
                                                  <li style="display: block;"><a href="/files/audio/efekty/czlowiek">Człowiek</a><span class="cnt">[0]</span></li>
                                                  <li style="display: block;"><a href="/files/audio/efekty/domowe">Domowe</a><span class="cnt">[0]</span></li>
                                                  <li style="border: none; display: block;"><a href="/files/audio/efekty/inne">Inne</a><span class="cnt">[0]</span></li>
                                           </ul>
                <div style="clear:both"></div>
                                    </li>  
                         </div>
             </ul>
    </ul>
            
        </nav>

KOD CSS

Kod

#menu {
  position: relative;
  clear: both;
  margin-top: 20px;
  float: left;
  width: 100%;
  padding-top: 4px;
  border-top: 1px solid #e0e0e0;
  z-index: 501;
}
#menu li.main {
  padding: 0 15px 0 15px;
  border: 1px solid white;
  padding-bottom: 4px;
  float: left;
  line-height: 34px;
  background: url("../../../images/menu_li_bg.gif") no-repeat 100% 37%;
  margin-left: -2px;
}
#menu li.main:last-child {
  background: none;
}
#menu li.main:hover {
  border: 1px solid #e0e0e0;
  border-bottom: none;
  background: none;
  -webkit-box-shadow: 3px 0px 1px -2px #d6d5d5;
  box-shadow: 3px 0px 1px -2px #d6d5d5;
}
#menu li.main:hover .submenu {
  display: table;
}
#menu li.main:hover .background {
  display: block;
}
#menu li.main .background {
  display: none;
}
#menu>ul>.main>a {
  font-size: 13px;
  color: #212121;
  display: block;
  /*padding:0 15px 0 15px;*/
}
#menu ul {
  float: left;
  margin-top: 3px;
}
#menu .main:first-child .submenu{
  /*display:block;*/
}
#menu .submenu {
    display:none;
    min-height:30px;
   width: 100%;
  position: absolute;
  left: 0;
  margin-top: 4px;
  padding-bottom: 10px;
  border: 1px solid #e0e0e0;
  -webkit-box-shadow: 1px 1px 1px 1px #d6d5d5;
  box-shadow: 1px 1px 1px 1px #d6d5d5;
  background: white;
  height:100px;
}
#menu .submenu>.submenu-ov>li {
    display:table-cell;
}
#menu .submenu-ov{    
   width: 98%;
   display:table;
   padding-left:10px;
}

#menu .submenu .m-head-ov>div.bg{
  background:url("../../../images/arrow_menu_top.png") no-repeat 46% 102%;
  padding-bottom:7px;    
  position:relative;
  top:-1px;
  visibility: hidden;
}
#menu .submenu .m-head {
  color: #c20707;
  background: none;
  font-size: 13px;
  font-weight: bold;
  padding: 7px 0 2px 0;
  display: block;
    border-bottom:1px solid #e0e0e0;
}
#menu .submenu li:hover .m-head a{
    color:#212121;
}
#menu .submenu ul {
  margin-top: 0;
}

#menu .submenu-absolute{
    position:absolute;
    width:100%;
}
#menu .submenu>.submenu-ov>li>.submenu-absolute {
    display:none;
    left:10px;
}
#menu .submenu>.submenu-ov>li>.submenu-absolute li {
    width:17%;
    float:left;    
    position:relative;
    border-bottom:1px solid #e0e0e0;
    margin-right:31.6px;
    
}
#menu .submenu>.submenu-ov>li:first-child .bg{
    visibility:visible;
}
#menu .submenu>.submenu-ov>li:first-child>.submenu-absolute {
    display:block;
}

#menu .submenu>.submenu-ov>li>.submenu-absolute a{
    font-size:12px;
    color:#212121;
}
#menu .submenu>.submenu-ov>li>.submenu-absolute a:hover{
    padding-left:2px;
}
#menu .submenu .cnt {
  line-height: 15px;
  position: absolute;
  top: 7px;
  right: 0;
  font-size: 11px;
  color: #7f7f7f;
  padding: 2px 5px;
}