[CSS]Problem z rozmiarami rozuswanego menu Opcje

[kosa351]

Witam serdecznie w Nowym Roku,
mam pewien problem z rozsuwanym menu. Na stronie postanowiłem skorzystać z tego rozwiązania http://www.dynamicdrive.com/dynamicindex1/switchmenu2.htm
Wszystko jest niby OK, ale mam problem z automatyczną wysokością rozsuwanego menu w zależności od treści.
W części kodu

Kod

.subItem
       {
       height:450px;
       width:auto;
       color:#FFFFFF;
       text-decoration:none;
       border-bottom:none 0px;
       }

Ustalamy sobie stałą wysokość. Aktualnie mam ustawione 450px. Niestety w jednym menu mam więcej treści, a w drugim mniej więc chciałbym aby to przycinał.
Przykład
(IMG:http://img171.imageshack.us/img171/5059/48094360wa8.th.jpg) (IMG:http://img293.imageshack.us/img293/9538/48273690wh6.th.jpg)

Chciałem to przyciąć więc ustawiłem zamiast 450px - auto lecz niestety efekt tej zamiany jest taki:
(IMG:http://img515.imageshack.us/img515/3398/68670616ui5.th.jpg) (IMG:http://img300.imageshack.us/img300/3650/48240269of5.th.jpg) (IMG:http://img183.imageshack.us/img183/2041/41482141km5.th.jpg)
Ponadto jak widać na ostatnim screenie IE7 się wykrzacza i nie działa nawet rozwijane menu.

Czy ktoś doradzi jak rozwiązać ten problem?

Pozdrawiam

Kod całego CSS

Kod

.navbar
   {
   }  
  
   .mainDiv
   {
     width:auto;
   }
  
   .topItem
   {
   width:300px;
   height:auto;
   color:#E21015;
   cursor:pointer;
   padding-bottom:5px;
   }
  
   .topItemOver
   {
       height: auto;
       width:300px;
       color:#E21015;
       cursor:pointer;
       padding-bottom:5px;
       background-color:#F00;
       color:#FF0;
       background-image:url(images/arrow_up.png);
       background-position:right;
       background-repeat:no-repeat;
   }
  
   .topItemClose
   {
   height: auto;
   width:300px;
   color: #E21015;
   cursor:pointer;
   padding-bottom:5px;
   text-decoration:none;
   border-bottom:dashed 1px;
   }
  
  
   .topItemCloseOver
   {
   height: auto;
   width: 300px;
   color: #E21015;
   cursor:pointer;
   padding-bottom:5px;
   text-decoration:none;
   border-bottom:dashed 1px;
   background-color:#000;
   color:#FF0;
   background-image:url(images/arrow_down.png);
   background-position:right;
   background-repeat:no-repeat;
   }
  
  
  
   .dropMenu
   {    
   background-color: #000;
   color: #000;
   border: 1px solid #000;
   border-width: 1px 1px 1px 1px;
   filter:alpha(opacity=100);
   padding-top:5px;
   padding-left:8px;
   }
  
   .subMenu
   {
   display:block;
   }
  
   .subItem
   {
   height:450px;
   width:auto;
   color:#FFFFFF;
   text-decoration:none;
   border-bottom:none 0px;
   }
  
   .subItem a
   {    
   border-bottom:none 0px;
   }
  
   .subItemOver
   {  
   height:auto;
   color: #FFFFFF;
   }
  
   .subItemOver  a
   {
   cursor:pointer;    
   color: #E21015;
   color:#FFFFFF;
   border-bottom:none 0px;
   }
  
  
   .drop
   {
   border-left:1px solid black;
   border-right:1px solid black;    
   }

kod html

Kod

<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
<div class="topItem" >- system LUX</div>        
<div class="dropMenu" ><!-- -->
     <div class="subMenu" style="display:inline;">
         <div class="subItem">
         <a href="../images/wisniowski/system_lux/aw_10_31.jpg" rel="lytebox[System LUX]" title="AW.10.31"><img src="../images/wisniowski/system_lux/aw_10_31.jpg" width="210" height="110" alt="aw_10_31" /></a>
         <a href="../images/wisniowski/system_lux/aw_10_33.jpg" rel="lytebox[System LUX]" title="AW.10.33"><img src="../images/wisniowski/system_lux/aw_10_33.jpg" width="210" height="110" alt="aw_10_33" /></a>
.......................................pozostałe zdjęcia.........................................
     </div>
</div>
</div>