How to make CSS menu expand up / updward instead of down [CMSMS1.42] [solved]

[yankee80]

Hi all,

When hovering the mouse over the standard CSS horizontal menu the menu children expand below the parent.

Is there any easy way to make the children expand above the parent instead?

Thanks in advance
Eric

[thoms]

Not so easy, as far as I know.

Look at the CSS, you have to change the relative position of the menu children:

Code: Select all

#primary-nav li li { 
   margin-left: 0px;
   margin-top: -1px;
   float: none; 
   position: relative; 
}

Play with negative values of margin-top. The problem is, that this is dependent on the nummber of child elements.

I don't know if there's an easier way.

Thomas

[KO]

Try playing with:

#primary-nav ul {
  position: absolute;
  top: auto;
  display: none;
}

I would try changing

top:auto -> bottom:auto or bottom:100%

[yankee80]

thanks to the both of you, but it didn't work out.

increasing the negative top margin makes the children show up ABOVE the main menu, but since different parents have a different amount of children it won't work anyway.

I think we have to forget about a dynamic CMS menu and go with a static javascript menu instead.

thanks anways
Eric

[Dr.CSS]

I solved this in an older post, you may try search to find it...

[Nullig]

Have you tried playing around with:

top: -20px;  /* depends on the height of your menu */

If you provide a link, it would be easier to play around with.

Nullig

[yankee80]

A CSS-expert friend of mine figured it out. The important things below are:

#menuwrapper {
WIDTH: 100%; BACKGROUND-COLOR: #7cccf2; POSITION: absolute; TOP: 0px; POSITION: relative ;LEFT: 0px;
}

#primary-nav UL {
DISPLAY: none; POSITION: absolute; BOTTOM: 24px;
}
#primary-nav UL UL {
MARGIN-TOP: 1px; LEFT: 100%; MARGIN-LEFT: -1px; BOTTOM: -1px;
}

-----------------------------------------
Full CSS below:


#menu_vert {
PADDING-LEFT: 125px; MARGIN-LEFT: 1px; MARGIN-RIGHT: 1px
}
.clearb {
CLEAR: both
}
#menuwrapper {
WIDTH: 100%; BACKGROUND-COLOR: #7cccf2; POSITION: absolute; TOP: 0px; POSITION: relative ;LEFT: 0px;
}
#primary-nav {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#primary-nav UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#primary-nav UL {
DISPLAY: none; POSITION: absolute; BOTTOM: 24px;
}
#primary-nav UL UL {
MARGIN-TOP: 1px; LEFT: 100%; MARGIN-LEFT: -1px; BOTTOM: -1px;
}
#primary-nav LI {
FLOAT: left; MARGIN-LEFT: -1px
}
#primary-nav LI LI {
MARGIN-TOP: -1px; FLOAT: none; MARGIN-LEFT: 0px; WIDTH: 165px; TEXT-ALIGN: left
}
#primary-nav A {
PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 12px; PADDING-BOTTOM: 5px; MARGIN: 0px; COLOR: #fff; PADDING-TOP: 5px; TEXT-DECORATION: none
}
#primary-nav LI LI A {
BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BORDER-LEFT: #fff 1px solid; COLOR: #006699; BORDER-BOTTOM: #fff 1px solid; BACKGROUND-COLOR: #e4f5ff
}
#primary-nav LI LI A:hover {
COLOR: #fff; BACKGROUND-COLOR: #e0b382
}
#primary-nav LI LI LI {

}
#primary-nav LI LI LI A {
BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BORDER-LEFT: #fff 1px solid; COLOR: #3399cc; BORDER-BOTTOM: #fff 1px solid; BACKGROUND-COLOR: #bfe9ff
}
#primary-nav LI LI LI A:hover {
COLOR: #fff; BACKGROUND-COLOR: #edbd5d
}
#primary-nav LI {

}
#primary-nav LI.menuparent {

}
#primary-nav LI.menuactive {
BACKGROUND-COLOR: #c5681d
}
#primary-nav UL LI.menuparent {
BACKGROUND-POSITION: right center; BACKGROUND-IMAGE: url(images/cms/arrow.gif); BACKGROUND-REPEAT: no-repeat
}
#primary-nav UL LI.menuparent:hover {
BACKGROUND-POSITION: right center; BACKGROUND-IMAGE: url(images/cms/arrow.gif); BACKGROUND-REPEAT: no-repeat
}
#primary-nav UL LI.menuparenth {
BACKGROUND-POSITION: right center; BACKGROUND-IMAGE: url(images/cms/arrow.gif); BACKGROUND-REPEAT: no-repeat
}
#primary-nav LI:hover {
BACKGROUND-COLOR: #c5681d
}
#primary-nav LI.menuh {
BACKGROUND-COLOR: #c5681d
}
#primary-nav LI.menuparenth {
BACKGROUND-COLOR: #c5681d
}
#primary-nav LI.menuactiveh {
BACKGROUND-COLOR: #c5681d
}
#primary-nav UL {
DISPLAY: none
}
#primary-nav LI:hover UL {
DISPLAY: none
}
#primary-nav LI:hover UL UL {
DISPLAY: none
}
#primary-nav LI.menuparenth UL {
DISPLAY: none
}
#primary-nav LI.menuparenth UL UL {
DISPLAY: none
}
#primary-nav LI:hover UL {
DISPLAY: block
}
#primary-nav UL LI:hover UL {
DISPLAY: block
}
#primary-nav UL UL LI:hover UL {
DISPLAY: block
}
#primary-nav LI.menuparenth UL {
DISPLAY: block
}
#primary-nav UL LI.menuparenth UL {
DISPLAY: block
}
#primary-nav UL UL LI.menuparenth UL {
DISPLAY: block
}
#primary-nav LI LI {
CLEAR: both; FLOAT: left
}
#primary-nav LI LI A {
HEIGHT: 1%
}

[Dr.CSS]

If you use the default horizontal CSS menu then just changing the 3 things below will make it go up, but the secondary menu items are starting off the menu in reverse...

#menuwrapper {position:relative
        }

#primary-nav ul {
position: absolute;
bottom: 0px;
display: none;
}
#primary-nav ul ul {
margin-top: 1px;
margin-left: -1px;
left: 100%;
bottom: 0px;
}