[CSS] Problem with height of the menu

[kosa351]

Hi,
I have a problem with the height of the drop-down menu. Menu based -> http://www.dynamicdrive.com/dynamici...witchmenu2.htm

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

When fixing the amount 450px everything is OK:
Examples:
http://img171.imageshack.us/my.php?i...8094360wa8.jpg
http://img293.imageshack.us/my.php?i...8273690wh6.jpg


When I change 450px to auto goes something like this
http://img515.imageshack.us/my.php?i...8670616ui5.jpg http://img300.imageshack.us/my.php?i...8240269of5.jpg

I would like to size drop-down menu was adjusted to included content. Where the 450px, and I have two lines of content to look ugly.

Please help in resolving the problem...

Full code CSS

.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;	
   }

[Nile]

Try one of the accordion menus instead:
http://www.dynamicdrive.com/dynamici...daccordion.htm
http://www.dynamicdrive.com/dynamici...ordionmenu.htm

[kosa351]

thanks for help,
with your suggestion i used http://www.dynamicdrive.com/dynamici...daccordion.htm

But I have a problem with putting the same as the correct css on this subpage - (example)
Current page - example

I would like to CSS was the same as in the previous case

Old CSS menu drop-down in first post - example

New CSS menu

.technology{ 
	cursor: pointer;
	width:300px;
	height:20px;
	color:#E21015;
}

.openlanguage { 
background-color:#F00;
color:#FF0;
background-image:url(images/arrow_up.png);
background-position:right;
background-repeat:no-repeat;
}

.closedlanguage { 
background-color:#000;
color:#FF0;
background-image:url(images/arrow_down.png);
background-position:right;
background-repeat:no-repeat;
}

[Nile]

I'm sorry. I didn't get a word you said. Please use correct grammar.

[kosa351]

sorry for my english, I know that it is not perfect. Once again from the beginning.
I can not set the CSS style. I would like to link visual look as in the previous case (first example) [links - system LUX, system STYL, etc.]
Currently, they look so - example link (wzory i kolory) and screen


I can not modify below the code CSS so links looked how in first example

.technology{ 
cursor: pointer;
width:300px;
height:20px;
color:#E21015;
}

.openlanguage { 
background-color:#F00;
color:#FF0;
background-image:url(images/arrow_up.png);
background-position:right;
background-repeat:no-repeat;
}

.closedlanguage { 
background-color:#000;
color:#FF0;
background-image:url(images/arrow_down.png);
background-position:right;
background-repeat:no-repeat;
}