[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/dynamicindex1/switchmenu2.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?image=48094360wa8.jpg
http://img293.imageshack.us/my.php?image=48273690wh6.jpg


When I change 450px to auto goes something like this
http://img515.imageshack.us/my.php?image=68670616ui5.jpg http://img300.imageshack.us/my.php?image=48240269of5.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/dynamicindex17/ddaccordion.htm
http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm

[kosa351]

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

But I have a problem with putting the same as the correct css on this subpage - (example (http://pro-fence.pl/podstrony/kute_wisniowski_segmenty.html))
Current page - example (http://pro-fence.pl/podstrony/garazowe_uchylne.html)

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

Old CSS menu drop-down in first post - example (http://pro-fence.pl/podstrony/kute_wisniowski_segmenty.html)

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 (http://pro-fence.pl/podstrony/kute_wisniowski_segmenty.html)) [links - system LUX, system STYL, etc.]
Currently, they look so - example link (wzory i kolory) (http://pro-fence.pl/podstrony/garazowe_uchylne.html) and screen (http://img296.imageshack.us/my.php?image=25437366sm5.jpg)


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