Drop down menu

[tecmeister]

Hi everyone,
I have created a drop down menu. I wont it to on rollOver go up not down. Is that possible?

If so please will you be able to tell me.
Thanks for your help.

[scragar]

should be possible, if the menu defaults to down you should be able to give the sub menus a negative top margin that will force them to the top, it's imperative that you use "em" for the measurements though, otherwise different font sizes will cause problems...
if the menu has more than 1 fold out menu(eg a 3 or 4 level menu) then you will need to remove this styling for further sub menus.

[tecmeister]

thanks for your help mate
Im kind of new so if i give you the code can you change it then i can learn from what you have done:

#tab ul {
display:none;
padding: 0px 0px 0px 0px;
margin: 0;
width: 90px;
height: 17px;
z-index: 99;
position: relative;
cursor: default;
vertical-align: top;
}

#tab li {
margin: 0px 3px 0px 2px;
float: left;
width: 90px;
background: url(homepage%20pictures/fubar%20tab2.png);
display: block;
height: 17px;
position:inherit;
vertical-align: top;
}
#tab ul li{
background: url(homepage%20pictures/fubar%20tab2.png);
width: 90px;
height: 17px;
margin: 0px 0px 0px 0px;
vertical-align:middle;
}
#tab a {
text-decoration: none;
display:block;
padding: 0;
margin: 0;
width: 90px;
height: 17px;
color: #000000;
font: bold, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
vertical-align:middle;
}

#tab a:hover, #tab li:hover, #tab ul li:hover, #tab ul li a:hover{
text-decoration:none;
display:block;
padding: 0;
margin: 0px 3px 0px 2px;
width: 90px;
height: 17px;
background: url(homepage%20pictures/fubar%20tab3.png);
color: #000000;
visibility:visible;
vertical-align:middle;

}
#tab ul ul, #tab ul ul ul{
display:none;
position: relative;
margin-top:-1.0em;
margin-left: 90px;
vertical-align:middle;
}
#tab ul li>ul, #tab ul ul li>ul{
margin-top:-1.5em;
margin-left: 90px;
vertical-align:middle;
}
#tab li:hover ul ul, #tab li:hover ul ul ul, #tab li:hover ul ul ul ul, #tab li:hover ul ul ul ul ul{
display:none;
}
#tab li:hover ul, #tab ul li:hover ul, #tab ul ul li:hover ul, #tab ul ul ul li:hover ul, #tab ul ul ul ul li:hover ul{
display:block;
}
#tab {
padding: 0px 0px 0px 10px;
margin: 0;
width: 580px;
height: 20px;
cursor: default;

}