Adding subdivisions to a menu

[SteveHigh]

Hello

Hello I have a menu here:

http://www.graphic9.com/driving/new/menu.html

(I know the links do not work) which comes with a .js file.

I am hoping to add a submenu whereby when the mouse goes over, say, one item in the main menu, a small submenu item springs out to the right.

I have seen this done, but I am not sure if it is done in Javascript or HTML/CSS.

Any advice would be welcome.

Thanks.

Steve

 

[Vragabond]

(Sons of) Suckerfish dropdowns.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[SteveHigh]

Hello Vragabond

Many thanks for your message.

I have been to Suckerfish (very useful, thanks) and started to customise one of the vertical menus there. The menu I am working on is here:

http://www.graphic9.com/driving/new/myMenu.html

For some reason, the white font is not visible (on a black background) and, ideally, I would like it to appear smaller (say 10px) in a smaller (narrower) vertical menu bar.

I can't see anything other than font-weight in the CSS code (please see below) which would enable me to get the font-size I was hoping for.

I would be grateful for any suggestions.

Many thanks.

Steve

<STYLE type=text/css>

BODY {
FONT-FAMILY: verdana, helvetica, serif
}
#nav {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 11em; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#nav UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 11em; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#nav LI {
FLOAT: left; MARGIN-BOTTOM: -1px; WIDTH: 11em; LINE-HEIGHT: 1.25em; POSITION: relative
}
#nav LI UL {
MARGIN-TOP: -1.35em; LEFT: -999em; MARGIN-LEFT: 11.05em; POSITION: absolute
}
#nav LI UL UL {
LEFT: -999em
}
#nav LI A {
BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 0.5em; BORDER-TOP: black 1px solid; DISPLAY: block; PADDING-LEFT: 0.5em; FONT-WEIGHT: normal; PADDING-BOTTOM: 0px; BORDER-LEFT: black 1px solid; WIDTH: 10em; COLOR: black; PADDING-TOP: 0px; BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: black; TEXT-DECORATION: none
}
#nav LI A:hover {
COLOR: white; BACKGROUND-COLOR: black
}
#nav LI:hover UL UL {
LEFT: -999em
}
#nav LI:hover UL UL UL {
LEFT: -999em
}
#nav LI.sfhover UL UL {
LEFT: -999em
}
#nav LI.sfhover UL UL UL {
LEFT: -999em
}
#nav LI:hover UL {
LEFT: auto
}
#nav LI LI:hover UL {
LEFT: auto
}
#nav LI LI LI:hover UL {
LEFT: auto
}
#nav LI.sfhover UL {
LEFT: auto
}
#nav LI LI.sfhover UL {
LEFT: auto
}
#nav LI LI LI.sfhover UL {
LEFT: auto
}
#content {
MARGIN-LEFT: 12em
}
</STYLE>

 

[Einstein47]

In your definition for #nav LI A you specify the text color as black, and background color as black, and you don't have any font size definition. Add that and see if that helps.

Einstein47
“Evil abounds when good men do nothing.“ - Nelson R.
[&#91;]Starbase47.com]

 

[SteveHigh]

Hello Einstein 47

Many thanks for your reply.

I didn't notice the black font colour in #nav LI A. I have now changed it and it works.

I think the font size, though I cannot see it as defined normally, must be written in units of em. What do you think?

Cheers again.

Steve

 

[jstreich]

fontsize can be in any unit -- pixels (px) ems, points (pt), etc.

[plug=shameless]

http://game-master.us/phpx-3.4.0/

[/plug]