I'm having trouble getting the CSS menu feature to submit to my will. I have two specific problems:

1. The border isn't drawn down the left side of the top-level menu, nor across the top of submenus.
2. Arrows, indicating the existence of submenus, aren't displayed. The editor creates the appropriate image files (PNG), so I assume they should be used.

An example is http://catplace.net/menu/. This has an exaggerated border width (10) to highlight the border problem.

As an aside, I note that the use of such a large border width stuffs up the alignment of the submenus, which are drawn too high. This wouldn't be noticeable with more sensible values.

I'd appreciate any help about what I'm doing wrong! (I have looked for solutions elsewhere, but haven't found anything I could understand.)

Many thanks,

Peter McLennan

Hi, I tried using arrows (small .gif's with transparent backgrounds that I made up myself) and typed them into the code manually after the menu item, but I wanted the menu text left-justified and the arrows right-justified.
I haven't found a way to have both on the same line in HTML & CSS so I gave up on it.

So I used   » instead (see my home page) to put a right-pointing double-angle in lieu.

They don't stand out as much as images would - but it works (sort of) and is similar to the separators used in crumb-trails on many sites.

Thank you, Zipper (from a fellow Australian). I checked out your website; that's an ingenious work-around. It looks very natural.

I did a bit of mucking around and came up with this (to be used for all menu items):

<a href="http://whatever"><div style="height:12px;"><div style="float:left;">Heading</div><div style="float:right;">&#x25BA;</div></div></a>

Depending on what font you're using (which is a tricky area), this should use a triangle arrow in lieu of your double-angle. The arrows should be right-justified.

I'm not sure why it was necessary to specify the height, but it was. The actual value to use would presumably depend on menu dimensions.

This might be a bit over the top; I'm not very good at CSS.

If it is necessary to use a work-around for this, and if borders don't work properly in vertically-aligned menus, should I be reporting these problems as bugs somewhere?

You're doing a good job Peter, better than me anyway.
I hadn't thought of specifying the height but it seems to work - it might have something to do with the <div> tag forcing a new line, I don't really know.
I noticed that FireFox has two ways of zooming, one zooms text and images which I prefer as it maintains the original page layout, the other is the normal method of zooming text only which can "break" the page layout.
I wondered if zooming text-only would cause a problem if using height:12px; so I used height:1.0em; instead (I picked that value out of thin air).
I've never used ems to specify a height before so I don't know if this is a good idea or not.
I dropped the idea of using a .gif arrow because of the text-only zoom thingamajig.


I'm not using borders in my vertical menus and don't know whether the borders are a CSS function or done with javascript - it wouldn't hurt to put in a support ticket.
Or perhaps someone with lots of CSS savvy could advise us.